@charset "UTF-8";

/* できるだけ、下記のクレジットは消さずに使って欲しいです！
- Name: web-0002 - base.css
- Version: 1.0
- Latest update: 18.08.2021
- Author: BOTAO
- Author web site: https://botao.co.jp
*/

/* 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;}

/* PC,SP表示
---------------------------------------------------------------- */
@media only screen and (min-width: 1025px){
.d--sp{ display:none!important;}
}
@media only screen and (max-width: 1024px){
.d--pc{ display:none!important;}
}


@media only screen and (max-width: 1024px){
  .onlypc{ display:none!important;}
}
@media screen and ( max-width: 600px ) , screen and ( min-width: 1025px )  {
  .onlytablet{ display:none!important;}
}
@media only screen and (min-width: 600px){
  .onlysp{ display:none!important;}
}

/* font-weight
---------------------------------------------------------------- */
.font--bold{ font-weight:700!important;}
.font--normal{ font-weight:normal!important;}

/* text-align
---------------------------------------------------------------- */
.text--left{ text-align:left;}
.text--center{ text-align:center;}
.text--right{ text-align:right;}


/* margin-top
---------------------------------------------------------------- */
.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: 1024px){
.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: 599px){
.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%;}
}

/* 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--flexend{display:flex;justify-content:flex-end;}

.flexparts--center{justify-content: center;}/* 横センター */
.flexparts--v-center{align-items: center;}/* 縦センター */

/* display
---------------------------------------------------------------- */
.d--i{ display:inline;}
.d--ib{ display:inline-block;}
.d--b{ display:block;}

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

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

/* 見出し
---------------------------------------------------------------- */
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{margin-left:auto;margin-right:auto; max-width:calc(1200px + 6%);padding: 0 3%;box-sizing: border-box;width: 100%;}
.b--wrapper{margin-left:auto;margin-right:auto; max-width:calc(1000px + 6%);padding: 0 3%;box-sizing: border-box;width: 100%;}
.b--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: 1024px){
.b--container{width: 100%;}
.b--wrapper{width: 100%;}
.b--contents{max-width: 100%;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;}
.header a p{font-size:3.8rem;line-height:.8;margin-top:5px;}
.header a span{font-size:1.2rem;line-height:.5;}

@media only screen and (max-width: 1024px){
.header{ padding:0; }
.head--icon{font-size:40px;background:#3878D7;width:75px;justify-content:center;padding:5px;}
.head--icon a{color:#fff;}
}

@media only screen and (max-width: 599px){
  .head--icon{font-size:35px;padding:3px;}
  .header h1 img{
    width:80%;
  }
}

/* footer
---------------------------------------------------------------- */
.footer address{ text-align:center;font-size: 1.4rem; /* margin-top: 100px; */ background:#003782; color: #FFF; padding: 15px 5px;}


/* 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: 48.5%;}
.col--2-1 .col--item:nth-of-type(2n-1){margin: 3% 1.5% 0 0;}
.col--2-1 .col--item:nth-of-type(2n){margin: 3% 0 0 1.5%;}
.col--2-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col--2-2 .col--item{width: 48.5%;}
.col--2-2 .col--item:nth-of-type(2n-1){margin: 3% 1.5% 0 0;}
.col--2-2 .col--item:nth-of-type(2n){margin: 3% 0 0 1.5%;}

.col--3-1{ width: 100%;display: flex;flex-wrap: wrap;}
.col--3-1 .col--item{width: 32%;}
.col--3-1 .col--item:nth-of-type(3n-2){margin: 3% 1% 0 0;}
.col--3-1 .col--item:nth-of-type(3n-1){margin: 3% 1% 0 1%;}
.col--3-1 .col--item:nth-of-type(3n){margin: 3% 0 0 1%;}
.col--3-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col--3-2 .col--item{ width: 32%;}
.col--3-2 .col--item:nth-of-type(3n-2){margin: 3% 1% 0 0;}
.col--3-2 .col--item:nth-of-type(3n-1){margin: 3% 1% 0 1%;}
.col--3-2 .col--item:nth-of-type(3n){margin: 3% 0 0 1%;}


.col--4-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col--4-2 .col--item{ width: 23.5%;}
.col--4-2 .col--item:nth-of-type(4n-3){margin: 3% 1% 0 0;}
.col--4-2 .col--item:nth-of-type(4n-2), .col--4-2 .col--item:nth-of-type(4n-1){margin: 3% 1% 0 1%;}
.col--4-2 .col--item:nth-of-type(4n){margin: 3% 0 0 1%;}

.col--5-2{ width: 100%;display: flex;flex-wrap: wrap;}
.col--5-2 .col--item{ width: 18.4%;}
.col--5-2 .col--item:nth-of-type(5n-4){margin: 3% 1% 0 0;}
.col--5-2 .col--item:nth-of-type(5n-3), .col--5-2 .col--item:nth-of-type(5n-2), .col--5-2 .col--item:nth-of-type(5n-1){margin: 3% 1% 0 1%;}
.col--5-2 .col--item:nth-of-type(5n){margin: 3% 0 0 1%;}
.col--5-3{ width: 100%;display: flex;flex-wrap: wrap;}
.col--5-3 .col--item{ width: 18.4%;}
.col--5-3 .col--item:nth-of-type(5n-4){margin: 3% 1% 0 0;}
.col--5-3 .col--item:nth-of-type(5n-3), .col--5-3 .col--item:nth-of-type(5n-2), .col--5-3 .col--item:nth-of-type(5n-1){margin: 3% 1% 0 1%;}
.col--5-3 .col--item:nth-of-type(5n){margin: 3% 0 0 1%;}

.col--6-3{ width: 100%;display: flex;flex-wrap: wrap;}
.col--6-3 .col--item{ width:15%;}
.col--6-3 .col--item:nth-of-type(6n-5){margin: 3% 1% 0 0;}
.col--6-3 .col--item:nth-of-type(6n-4), .col--6-3 .col--item:nth-of-type(6n-3), .col--6-3 .col--item:nth-of-type(6n-2), .col--6-3 .col--item:nth-of-type(6n-1){margin: 3% 1% 0 1%;}
.col--6-3 .col--item:nth-of-type(6n){margin: 3% 0 0 1%;}


.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: 1024px){
.col--2-1 .col--item:nth-of-type(2n-1), .col--2-1 .col--item:nth-of-type(2n){width: 100%;margin: 5% 0 0 0;}

.col--2-2 .col--item{width: 48.5%;}
.col--2-2 .col--item:nth-of-type(2n-1){margin: 5% 1.5% 0 0;}
.col--2-2 .col--item:nth-of-type(2n){margin: 5% 0 0 1.5%;}

.col--3-1 .col--item:nth-of-type(3n-2), .col--3-1 .col--item:nth-of-type(3n-1), .col--3-1 .col--item:nth-of-type(3n){width: 100%;margin: 5% 0 0 0;}

.col--3-2 .col--item{width: 48.5%;}
.col--3-2 .col--item:nth-of-type(2n-1){margin: 5% 1.5% 0 0;}
.col--3-2 .col--item:nth-of-type(2n){margin: 5% 0 0 1.5%;}

.col--4-2 .col--item{width: 48.5%;}
.col--4-2 .col--item:nth-of-type(2n-1){margin: 5% 1.5% 0 0;}
.col--4-2 .col--item:nth-of-type(2n){margin: 5% 0 0 1.5%;}

.col--5-2 .col--item{width: 48.5%;}
.col--5-2 .col--item:nth-of-type(2n-1){margin: 5% 1.5% 0 0;}
.col--5-2 .col--item:nth-of-type(2n){margin: 5% 0 0 1.5%;}
.col--5-3 .col--item{width: 32%;}
.col--5-3 .col--item:nth-of-type(3n-2){margin: 5% 1% 0 0;}
.col--5-3 .col--item:nth-of-type(3n-1){margin: 5% 1% 0 1%;}
.col--5-3 .col--item:nth-of-type(3n){margin: 5% 0 0 1%;}

.col--6-3 .col--item{width: 32%;}
.col--6-3 .col--item:nth-of-type(3n-2){margin: 5% 1% 0 0;}
.col--6-3 .col--item:nth-of-type(3n-1){margin: 5% 1% 0 1%;}
.col--6-3 .col--item:nth-of-type(3n){margin: 5% 0 0 1%;}

.col--img-txt .col--item-img{ width: 40%; padding: 10px;}
.col--img-txt .col--item-txt{ width: 60%; padding: 10px;box-sizing: border-box;}
}

@media only screen and (max-width: 599px){
.col--2-1 .col--item:nth-of-type(2n-1), .col--2-1 .col--item:nth-of-type(2n){width: 100%;margin: 10% 0 0 0;}

.col--2-2 .col--item{width: 48.5%;}
.col--2-2 .col--item:nth-of-type(2n-1){margin: 10% 1.5% 0 0;}
.col--2-2 .col--item:nth-of-type(2n){margin: 10% 0 0 1.5%;}

.col--3-1 .col--item:nth-of-type(3n-2), .col--3-1 .col--item:nth-of-type(3n-1), .col--3-1 .col--item:nth-of-type(3n){width: 100%;margin: 10% 0 0 0;}
.col--3-2 .col--item:nth-of-type(2n-1){margin: 10% 1.5% 0 0;}
.col--3-2 .col--item:nth-of-type(2n){margin: 10% 0 0 1.5%;}

.col--4-2 .col--item:nth-of-type(2n-1){margin: 10% 1.5% 0 0;}
.col--4-2 .col--item:nth-of-type(2n){margin: 10% 0 0 1.5%;}

.col--5-2 .col--item:nth-of-type(2n-1){margin: 10% 1.5% 0 0;}
.col--5-2 .col--item:nth-of-type(2n){margin: 10% 0 0 1.5%;}

.col--5-3 .col--item:nth-of-type(3n-2){margin: 10% 1% 0 0;}
.col--5-3 .col--item:nth-of-type(3n-1){margin: 10% 1% 0 1%;}
.col--5-3 .col--item:nth-of-type(3n){margin: 10% 0 0 1%;}

.col--6-3 .col--item:nth-of-type(3n-2){margin: 10% 1% 0 0;}
.col--6-3 .col--item:nth-of-type(3n-1){margin: 10% 1% 0 1%;}
.col--6-3 .col--item:nth-of-type(3n){margin: 10% 0 0 1%;}
}

/* col2-2-1 */
.col--2-2-1{ width: 100%;display: flex;flex-wrap: wrap;}
.col--2-2-1 .col--item{width: 48.5%;}
.col--2-2-1 .col--item:nth-of-type(2n-1){margin: 1.5% .75% 0 0;}
.col--2-2-1 .col--item:nth-of-type(2n){margin: 1.5% 0 0 .75%;}

@media only screen and (max-width: 599px){
.col--2-2-1 .col--item:nth-of-type(3n-2), .col--2-2-1 .col--item:nth-of-type(3n-1), .col--2-2-1 .col--item:nth-of-type(3n){width: 100%;margin: 1.5% 0 0 0;}
}

/* col3-2-1 */
.col--3-2-1{ width: 100%;display: flex;flex-wrap: wrap;}
.col--3-2-1 .col--item{ width: 32%;margin: 1% 0 0 0;}
.col--3-2-1 .col--item:nth-of-type(3n-2){margin: 1% 1% 0 0;}
.col--3-2-1 .col--item:nth-of-type(3n){margin: 1% 0 0 1%;}

@media only screen and (max-width: 1024px){
.col--3-2-1 .col--item{width: 48.5%;}
.col--3-2-1 .col--item:nth-of-type(2n-1){margin: 1.5% 1% 0 0;}
.col--3-2-1 .col--item:nth-of-type(2n){margin: 1.5% 0 0 1%;}
}

@media only screen and (max-width: 599px){
.col--3-2-1 .col--item:nth-of-type(3n-2), .col--3-2-1 .col--item:nth-of-type(3n-1), .col--3-2-1 .col--item:nth-of-type(3n){width: 100%;margin: 1.5% 0 0 0;}
}


/* サイドメニュー
---------------------------------------------------------------- */
.l--secondary ul{ margin-bottom: 20px;}
.l--secondary ul li{border-bottom: 1px solid #CCCC; }
.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: 1024px){
.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;width:100%;box-sizing: border-box;}
.topics dt{ color: #666; font-size: 85%;}
.topics dd{ border-bottom: 1px dotted #ccc; margin-bottom: 1em;}
@media only screen and (max-width: 1024px){
.topics{ padding: 20px;}
}

/* WPログイン状態の時に出るヘッダー黒バーずれを起こさない
---------------------------------------------------------------- */
.admin-bar .header{
  top:35px;  
}
@media screen and (max-width: 782px) {
  .admin-bar .header{
    top:47px;  
  }
}

/* single（投稿シングルページ）
---------------------------------------------------------------- */
.single--img{ margin-top: 20px;}
.single--txt{ margin-top: 20px;}
.single--navi{ margin-top: 50px;width:100%;margin-left:auto;margin-right:auto;}
.single--navi a {
display: block;
padding: 10px;
color:#000;
box-sizing: border-box;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 33.3333%;
text-align: center;
}
.single--navi a:first-child {
box-sizing: border-box;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 33.3333%;
text-align: center;
}
@media only screen and (max-width: 1024px){
.single--navi{width:100%;}
}
@media only screen and (max-width: 360px){
.single--navi a {font-size: 13px;}
}


/* 投稿内のリストスタイル---------------- */
.single--txt ul li{list-style-type: disc;list-style-position: outside;margin-left: 20px;}
.single--txt ol li{list-style-type: decimal;list-style-position: outside;margin-left: 20px;}
.single--txt ul li{list-style-type: disc;list-style-position: outside;margin-left: 20px;}
.single--txt ol li{list-style-type: decimal;list-style-position: outside;margin-left: 20px;}

/* 投稿内の画像配置---------------- */
.single--txt img.alignright{float:right;}
.single--txt img.alignleft{float:left;}
.single--txt img.aligncenter{ display: block; margin: 0 auto; }

.single--txt{clear:both;overflow:auto;}

@media only screen and (max-width: 1024px){
.single--txt img.alignright{float:none;display:block;margin-left:auto;margin-right:auto;}
.single--txt img.alignleft{float:none;display:block;margin-left:auto;margin-right:auto;}
}