@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,400,500,700&subset=japanese');

/*----------------------------------------------------------
/* 基本定義
/* last 2022.11.15
-----------------------------------------------------------*/
/*フォント設定*/
html{
  font-size: 10px; /* initial 10px */
}
body{
  font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size:1.2rem; /* default font-size 16px */
  font-weight: 400;
  line-height : 1.5;
  color:#000;
}
/* Google fonts  ->  Noto Sans JP */
/* Regular 400/Medium 500/Bold 700 */


/* アンカー／初期化 */
a,
a:link,
a:visited{
  text-decoration: none;
  color:#000;
}
a:active,
a:hover{
  text-decoration: underline;
}

/* imgホバー透過 */
a:hover img{
  opacity:0.65;
  -webkit-transition:all 0.2s linear;
  transition:all 0.2s linear;
}

/* 画像レスポンシブ・インライン */
.img-respo{
  display:block;
  margin:0 auto 0;
  max-width:100%;
  height: auto;
}
.img-respo_inline{
  display:inline-block;
  max-width:100%;
  height: auto;
}

/* 汎用マージン */
.mb0{
  margin-bottom: 0!important;
}
.mb5{
  margin-bottom: 5px!important;
}
.mb10{
  margin-bottom: 10px!important;
}
.mb15{
  margin-bottom: 15px!important;
}
.mb20{
  margin-bottom: 20px!important;
}
.mb25{
  margin-bottom: 25px!important;
}
.mb30{
  margin-bottom: 30px!important;
}
.mb40{
  margin-bottom: 40px!important;
}
.mb50{
  margin-bottom: 50px!important;
}




/*----------------------------------------------------------
/* レイアウト
-----------------------------------------------------------*/
article{
  margin:0 auto 50px;
}
/* Bootstrap override */
.container{
  width:100%;
  max-width:800px !important;
}
article > section:nth-of-type(n+2){
  margin-top:30px;
}
@media (max-width:767px){
}
@media (min-width:768px){
  article > section:nth-of-type(n+2){
    margin-top:45px;
  }
}


/*----------------------------------------------------------
/* ブロック基本
-----------------------------------------------------------*/
/*** 見出し ***/
section h2{
  margin:0 auto 35px;
  font-size:2.4rem;
}
section h3{
  margin:0 0 15px 0;
  font-size:1.6rem;
  font-weight: normal;
  color:#445c93;
}
section div p{
  line-height:1.8;
  font-size:1.4rem;
  color:#595757;
}
/*** 掲載日と取材日 ***/
section .published,
section .btm-record{
  margin:0 0 20px 0;
  text-align: right;
  font-size:1.3rem;
}
/* 掲載日*/
section .published{
  margin:0 0 20px 0;
}
/* 取材日 */
section .btm-record{
  margin:40px 0 0 0;
}

/*** 写真 ***/
section .photo-box{
  margin:20px auto 20px;
  width:100%;
}
/*** リード文、あとがき ***/
.sponsorcase-lead,
.afterword{
  margin:0 0 0 0;
  font-weight: bold;
}

/*** 横組／写真と記事 ***/
.article-box{
  display: flex;
  flex-wrap: wrap;
  /*
  align-items: center;
  */
  justify-content: space-between;
  margin:0 auto 20px;
  width:100%;
}
@media screen and (max-width:767px){
  section .photo-box{
    padding:0 15px;
  }
  section .photo-box > div:nth-of-type(n+2){
    margin-top:15px;
  }
/*** 横組／写真と記事 ***/
  .article-box .photo,
  .article-box p{
    width:100%;
  }
  .article-box p{
    margin-top:15px;
  }
  /* 写真2枚以上 */
  .article-box.multiple > div:nth-of-type(n+2){
    margin-top: 15px;
  }

}
@media screen and (min-width:768px){
  section .photo-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  section .photo-box > div{
    padding:0 15px;
    width:50%;
  }
  /* 写真表示／1点 */
    section .photo-box .single{
    width:100%;
  }
  section .photo-box > div:nth-of-type(n+3){
    margin-top:15px;
  }
  /*** 横組／写真と記事 ***/
  .article-box .photo,
  .article-box p{
    width:48%;
  }
  .article-box .photo.rl-change{
    order:2;
  }
  .article-box p.rl-change{
    order:1;
  }
  .article-box .photo .size90{
    width:90%;
  }
  .article-box .photo .size80{
    width:80%;
  }
  .article-box .photo .size70{
    width:70%;
  }
  .article-box .photo .size60{
    width:60%;
  }
  /* 写真2枚以上／余白無し */
  .article-box.multiple .photo{
    width:50%;
  }
  .article-box.multiple > div:nth-of-type(n+3){
    margin-top: 0;
  }

}


/*----------------------------------------------------------
/* ヘッダー（メインイメージ）
-----------------------------------------------------------*/
header{
  margin:0 auto 5px;
  width:100%;
  max-width:1000px;
}
header h1{
  margin:0 auto 0;
}
@media screen and (max-width:767px){

}
@media screen and (min-width:768px){

}


/*----------------------------------------------------------
/* フッター
-----------------------------------------------------------*/
footer{
  margin:0 auto 40px;
  padding:0 0 40px 0;
  width:100%;
  max-width:800px;
  border-bottom:solid 1px #000;
}
footer h4{
  margin:0 0 8px 0;
  font-size:2rem;
  font-weight: normal;
  color:#000;
}
/*** 事例メニュー ***/
footer .sponsor-case-lineup{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin:0 auto 30px;
  padding:15px 10px;
  width:100%;
  background-color:#d1dbe5;
}
footer .sponsor-case-lineup > li{
  padding-right:10px;
}
footer .sponsor-case-lineup > li a{
  display: inline-block;
  padding-left:1em;
  line-height:1.3;
  text-indent:-1em;
}
footer .sponsor-case-lineup > li a,
footer .sponsor-case-lineup > li a::before{
  font-size:1.3rem;
  color:#000;
}
footer .sponsor-case-lineup > li a::before{
  content:'・';
}
footer .contact-box{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
footer .contact-box > a{
  display: block;
  padding:10px 10px;
}

@media (max-width:767px){
  footer{
    padding:0 15px 40px 15px;
  }
  /*** 事例メニュー ***/
  footer .sponsor-case-lineup > li{
    width:50%;
  }
  footer .sponsor-case-lineup > li:nth-of-type(n+3){
    margin-top:15px;
  }
  /*** 問い合わせ ***/
  footer .contact-box{
    justify-content: center;
  }
  footer .contact-box a{
    text-align: center;
  }
  footer .contact-box span{
    margin:10px auto 0;
    padding:0 0 0 1em;
    text-indent:-1em;
    width:100%;
  }
}
@media (min-width:768px){
  footer{
    padding:0 0 40px 0;
  }
  /*** 事例メニュー ***/
  footer .sponsor-case-lineup > li{
    width:16.6%;
  }
  footer .sponsor-case-lineup > li:nth-of-type(n+7){
    margin-top:15px;
  }
  /*** 問い合わせ ***/
  .sponsorship-index-btminfo h4{
    text-align: left !important;
  }
}