@charset "UTF-8";
/* Font
---------------------------------------------------------------- */
.bold{ font-weight:bold!important;}
.bold2{ font-weight:900!important;}

/* Link
---------------------------------------------------------------- */
a,a img{
transition: all 0.3s;
}

a:hover{
opacity: 0.5;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

a.hvr:hover img {
opacity: 0.8;
}


a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color:#000;
text-decoration: none;
}
a:active {
color:#000;
text-decoration: none;
}

/* Utility
---------------------------------------------------------------- */
@media only screen and (min-width: 769px){
.sp{ display:none!important;}
}
@media only screen and (max-width: 768px){
.pc{ display:none!important;}
}

.c-left{ text-align:left;}
.c-center{ text-align:center;}
.c-right{ text-align:right;}

.c-ib{ display:inline-block;}

.mt-xs{ margin-top:5px;}
.mt-ss{ margin-top:10px;}
.mt-sm{ margin-top:15px;}
.mt-sl{ margin-top:20px;}
.mt-ms{ margin-top:30px;}
.mt-mm{ margin-top:40px;}
.mt-ml{ margin-top:50px;}
.mt-ls{ margin-top:60px;}
.mt-lm{ margin-top:70px;}
.mt-ll{ margin-top:80px;}
.mt-xl{ margin-top:100px;}

@media only screen and (max-width: 768px){
.mt-xs{ margin-top:.70423%;}
.mt-ss{ margin-top:1.40845%;}
.mt-sm{ margin-top:2.11268%;}
.mt-sl{ margin-top:2.8169%;}
.mt-ms{ margin-top:4.22535%;}
.mt-mm{ margin-top:5.6338%;}
.mt-ml{ margin-top:7.04225%;}
.mt-ls{ margin-top:8.4507%;}
.mt-lm{ margin-top:9.85915%;}
.mt-ll{ margin-top:11.26761%;}
.mt-xl{ margin-top:14.08451%;}
}

@media only screen and (max-width: 480px){
.mt-xs{ margin-top:1.13122%;}
.mt-ss{ margin-top:2.26244%;}
.mt-sm{ margin-top:3.39367%;}
.mt-sl{ margin-top:4.52489%;}
.mt-ms{ margin-top:6.78733%;}
.mt-mm{ margin-top:9.04977%;}
.mt-ml{ margin-top:11.31222%;}
.mt-ls{ margin-top:13.57466%;}
.mt-lm{ margin-top:15.8371%;}
.mt-ll{ margin-top:18.09955%;}
.mt-xl{ margin-top:22.62443%;}
}


/* 見出し
---------------------------------------------------------------- */
h1 {
font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
font-size: calc(2.4rem + ((1vw - 6.4px) * 2.1429));
line-height: 1.3;
}
h2 {
font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
font-size: calc(2rem + ((1vw - 6.4px) * 0.7143));
line-height: 1.3;
}
h3 {
font-size: 20px;/* IE8以下とAndroid4.3以下用フォールバック */
font-size: calc(1.8rem + ((1vw - 6.4px) * 0.3571));
line-height: 1.3;
}

@media (min-width: 1200px) {
h1 {font-size: 3.6rem;/* 36px*/}
h2 {font-size: 2.4rem;/* 24px*/}
h3 {font-size: 2.0rem;/* 20px*/}
}
@media screen and (max-width: 640px) {/* 640px以下*/
h1{font-size: 2.4rem;/* 24px*/}
h2 {font-size: 2rem;/* 20px*/}
h3 {font-size: 1.8rem;/* 18px*/}
}


/* Layout
---------------------------------------------------------------- */
.b-container{ width:100%;}
.b-wrapper{margin-left:auto;margin-right:auto; max-width:1000px; box-sizing: border-box;padding:0 0.1%;}
.contents{ max-width: 800px;margin-left:auto;margin-right:auto;}
.l-primary{ width:70%; box-sizing: border-box;}
.l-secondary{width:25%;box-sizing: border-box;}

@media only screen and (max-width: 768px){
.b-wrapper{ padding: 0 2.5%; width: 100%;}
.l-primary{ width:100%;}
.l-secondary{width:100%;}
}

/* globalnavi
---------------------------------------------------------------- */
.glnav{ width: 100%; background: #DDD;}


/* header
---------------------------------------------------------------- */
.header{ width: 100%; padding: 10px 0;box-sizing: border-box; line-height: 1.4;}
.header .logo_area{width:30%;}
.header .logo{ max-width: 340px; margin-top: 8px;}
.header .summary{ font-size: 14px; text-align: center; padding: 2px 0;}
.header .head-tel{ font-size: 30px;margin-right:10px;}

@media only screen and (max-width: 1000px){
.header .head-tel{ font-size: 28px;}
}
@media only screen and (max-width: 768px){
.header .logo_area{width:50%;}
.header .logo{ max-width: 90%;}
.header{ width: 100%; padding: 0; }
.header .summary{ font-size: 12px; }
.header .b-wrapper{ padding:10px;}
.header .head-icon{ margin-right: 60px;}
.header .head-icon li{ display: inline-block; margin-left: 5px;}
}

/* footer
---------------------------------------------------------------- */
.footer{background-color:#000;padding:10px 0 0; width: 100%; text-align: center; box-sizing: border-box; margin-top: 50px; }
.footer a{padding: 15px 20px 0; display: inline-block;margin:10px;color:#fff;}
.footer a:hover{}
.footer address{ font-size: 13px; margin-top: 50px; background:#333; color: #FFF; padding: 5px;}
.footer .logo img{width:140px;}



/* flexbox
---------------------------------------------------------------- */
.flexbox-basic{display: flex;flex-direction: row;align-items: stretch;}  
.flexbox-row-reverse{display: flex;flex-direction: row-reverse;align-items: stretch;}
.flexbox-nowrap{display: flex;flex-wrap: nowrap;align-items: stretch;}
.flexbox-wrap{display: flex;flex-wrap: wrap;align-items: stretch;}
.flexbox-between{display: flex;justify-content: space-between;align-items: stretch;}
.flexbox-around{display: flex;justify-content: space-around;align-items: stretch;}
.flexbox-flex-end{display:flex;justify-content:flex-end;}

.flexbox-center{justify-content: center;}/* 横センター */
.flexbox-v-center{align-items: center;}/* 縦センター */
.flex-reverse{flex-direction: row-reverse;}
.flexbox-align-self-center{align-self:center;}


/* block
---------------------------------------------------------------- */
.span-block{display:block;}
.span-block-pc{display:block;}

@media only screen and (max-width: 768px){
.display-block-sp{ display: block;}
.display-inblock-sp{ display: inline-block;}
.span-block-pc{display:inline;}
.span-block-sp{display:block;}
}



/* cloumn
---------------------------------------------------------------- */
.pic{ width: 100%; background: #333; padding:30% 0;}
.pic-01{ width: 100%; background: #333; padding:30% 0;}
.pic-02{ width: 100%; background: #666; padding:30% 0;}
.pic-03{ width: 100%; background: #999; padding:30% 0;}
.txt{ margin: 5px 0;}
.icon-category a{ display: inline-block; padding: 3px 10px; font-size: 10px; background: #00B5FF; color: #FFF; border-radius: 3px;}
.icon-category{ display: inline-block;}
.col-2-1{ width: 100%;display: flex;flex-wrap: wrap;}
.col-2-1 .col-item{ width: 46%; margin: 3% 2% 0 }
.col-2-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col-2-2 .col-item{ width: 46%; margin: 3% 2% 0 }
.col-3-1{ width: 100%;display: flex;flex-wrap: wrap;}
.col-3-1 .col-item{ width: 30%; margin: 3% 1.66% 0 }
.col-3-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col-3-2 .col-item{ width: 30%; margin: 3% 1.66% 0 }
.col-4-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col-4-2 .col-item{ width: 22%; margin: 3% 1.5% 0 }
.col-5-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col-5-2 .col-item{ width: 18%; margin: 3% 1% 0 }
.col-5-3{ width: 100%;display: flex;flex-wrap: wrap;}
.col-5-3 .col-item{ width: 18%; margin: 3% 1% 0 }
.col-6-3{ width: 100%;display: flex;flex-wrap: wrap;}
.col-6-3 .col-item{ width: 14.6666%; margin: 3% 1% 0 }


.col-img-txt{width: 100%;display: flex;flex-wrap: wrap; background: #EEE; margin-top: 10px;}
.col-img-txt .col-item-img{ width: 20%; padding: 20px;box-sizing: border-box;}
.col-img-txt .col-item-txt{ width: 80%; padding: 20px;box-sizing: border-box;}

@media only screen and (max-width: 768px){
.col-2-1 .col-item{ width: 100%; margin: 3% 0 0 }
.col-3-1 .col-item{ width: 100%; margin: 3% 0 0 }
.col-3-2 .col-item{ width: 47%; margin: 3% 1.5% 0 }
.col-4-2 .col-item{ width: 47%; margin: 3% 1.5% 0 }
.col-5-2 .col-item{ width: 47%; margin: 3% 1.5% 0 }
.col-5-3 .col-item{ width: 30.33333%; margin: 3% 1.5% 0 }
.col-6-3 .col-item{ width: 30.33333%; margin: 3% 1.5% 0 }
.col-img-txt .col-item-img{ width: 40%; padding: 10px;}
.col-img-txt .col-item-txt{ width: 60%; padding: 10px;box-sizing: border-box;}
}


/* サイドメニュー
---------------------------------------------------------------- */
.l-secondary ul{ margin-bottom: 20px;}
.l-secondary ul li{border-bottom: 1px solid #CCC; }
.l-secondary ul li a{ 
padding: 8px 5px 8px 10px; 
display: block; 
background: url("../images/base/next.svg") no-repeat 90% center;
background-size: 3%;
}


/* table
---------------------------------------------------------------- */

.d-table{ display: table; width: 100%;}
.d-table-cell{ display: table-cell; vertical-align: top;}



/* iframeレスポンシブ
---------------------------------------------------------------- */

@media only screen and (max-width: 768px){
.iframe-wrap {
position: relative;
padding-bottom: 56.25%; 
height: 0;
overflow: hidden;
}

.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

/* pagetop
---------------------------------------------------------------- */
.pagetop{ text-align: center; font-size: 30px; margin-top: 50px;}
.pagetop a{color: #ccc; }


/* topics
---------------------------------------------------------------- */
.topics{ background: #F4F4F4; padding: 40px;}
.topics dt{ color: #666; font-size: 85%;}
.topics dd{ border-bottom: 1px dotted #ccc; margin-bottom: 1em;}
@media only screen and (max-width: 768px){
.topics{ padding: 20px;}
}