@charset "utf-8";
/* CSS Document */

/*gnav*/

#picks-detail #gnav .fixed,
#action #gnav .fixed{
 position: absolute;
  padding: 25px 0;
}
#picks-detail #gnav .drawer__btn.active,
#action #gnav .drawer__btn.active{
  z-index: 10005;
}
#picks-detail #header.headerColorScroll #gnav .fixed, 
#picks-detail #header.headerColorScroll .fixed.active,
#picks-detail #header .fixed.active,
#action #header.headerColorScroll #gnav .fixed, 
#action #header.headerColorScroll .fixed.active,
#action #header .fixed.active{
  background: none;
}
#picks-detail #header #gnav .fixed .language,
#picks-detail #header #gnav .fixed .language a:link,
#picks-detail #header #gnav .fixed .language a:visited,
#action #header #gnav .fixed .language,
#action #header #gnav .fixed .language a:link,
#action #header #gnav .fixed .language a:visited{
color: #231815;
}

#picks-detail #header #gnav .fixed .drawer__btn span,
#action #header #gnav .fixed .drawer__btn span{
background-color: #231815;
}

#picks-detail #header.headerColorScroll .fixed h1,
#action #header.headerColorScroll .fixed h1{
  display: none;
}


@media only screen and (max-width:640px) {  
#picks-detail #gnav .fixed,
#action #gnav .fixed    {
    padding: 20px 0;
  }  
#picks-detail #gnav .language,
#action #gnav .language{
    padding-top: 3px;
    font-size: 1.3rem;
  }
}

/*見出し*/

#picks-detail h1 {
  position: absolute;
  top: 12px;
  z-index: 4;
}
#picks-detail h1.enlogo {
  top: 17px;
}
#picks-detail h1.active {
  z-index: 1;
}
#picks-detail h1 img {
  max-width: 170px;
}
#picks-detail h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 100px;
  letter-spacing: 0;
}

#picks-detail h2::before{
content: none;
}

#picks-detail h2 span {
  font-size: 1.8rem;
  display: block;
  margin-top: 30px;
margin-bottom: 100px;
}

#picks-detail h2 p{
  font-size: 2.8rem;
  text-align: center;
line-height: 1.8;
}
#picks-detail h2 p span{
  font-size: 2.8rem;
  margin-bottom: 0;
}

#picks-detail h3 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 70px;
line-height: 1.8;
}


@media only screen and (max-width:640px) {
  #picks-detail h1 img {
    width: 70%;
  }
  #picks-detail h2 {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 35px;
    margin-top: 30px;
  }
    #picks-detail h2 p{
    font-size: 1.6rem;
  }
#picks-detail h2 p:lang(en){
     font-size: 1.8rem;
    word-break: break-word;
}    
  #picks-detail h2 span {
    font-size: 1.3rem;
    margin-bottom: 0;
     margin-top: 15px; 
  }
  #picks-detail h3 {
    font-size: 1.65rem;
    padding: 0.5em;
    margin-bottom: 55px;
    word-break: break-word;
  }
}

/*mainvisual*/

#mainvisual {
padding-top: 70px;
background: #fff;
}
#mainvisual .main-img {
    position: relative;
    height: 69vh;
    background-image: url("../picks/img/interview01-main.jpg");
    background-size: cover;
    background-position: center 50%;
}
#action #mainvisual .main-img {height: 69vh;}  

#mainvisual .main-img.interview02{background-image: url("../picks/img/interview02-main.jpg");}
#mainvisual .main-img.interview03{background-image: url(../picks/img/interview03/interview03-main.webp);}
#mainvisual .main-img.interview04{background-image: url(../picks/img/miyajima-odori/miyajima-odori-main.webp);}
#mainvisual .main-img.miyajima-bori{background-image: url(../picks/img/miyajima-bori/miyajima-bori-main.webp);}
#mainvisual .main-img.miyadaiku{
    background-image: url(../picks/img/miyadaiku/img-miyadaiku-01.webp);
    background-position: top center;
}
#mainvisual .main-img.interview06{background-image: url(../picks/img/chue-pj/chue-pj-main.webp);}
#mainvisual .main-img.taimatsu{background-image: url(../picks/img/taimatsu/img-taimatsu-01.webp);}
#mainvisual .main-img.miyazato{background-image: url(../picks/img/miyazato/img-miyazato-01.webp);}
#mainvisual .main-img.forum{background-image: url(../picks/img/forum/img-forum-01.webp);}
#mainvisual .main-img.rokuro{background-image: url(../picks/img/rokuro/img-rokuro-01.webp);}
#mainvisual .main-img.hayashike{background-image: url(../picks/img/hayashike/img-hayashike-01.webp);}
#mainvisual .main-img.action-main{background-image: url(../img/action/case/img-action-torikumi-main.webp);}
#mainvisual .main-img.action-1{background-image: url("../img/action/case/img-action-torikumi-1_head.webp");}
#mainvisual .main-img.action-2{background-image: url("../img/action/case/img-action-torikumi-2_head.webp");}
#mainvisual .main-img.action-3{background-image: url("../img/action/case/img-action-torikumi-3_head.webp");}
#mainvisual .main-img.action-4{background-image: url("../img/action/case/img-action-torikumi-4_head.webp");}
#mainvisual .main-img.manner{background-image: url("../img/action/manner/img-manner_head.webp");}
@media only screen and (max-width:1000px) and (min-width:641px){
#mainvisual .main-img.interview02{background-position: 62% 50%;}
#mainvisual .main-img.interview03,
#mainvisual .main-img.interview04,    
#mainvisual .main-img.miyajima-bori{background-position: center center;}
}

@media only screen and (max-width:640px) {
#mainvisual {padding-top: 60px;}
#mainvisual .main-img {height: 100vh;}
#action #mainvisual .main-img {height: 100vh;}    
#mainvisual .main-img.interview02,
#mainvisual .main-img.interview04{background-position: 47% 50%;}
#mainvisual .main-img.miyajima-bori{background-image: url(../picks/img/miyajima-bori/miyajima-bori-main_sp.webp);}
#mainvisual .main-img.miyadaiku{background-image: url(../picks/img/miyadaiku/img-miyadaiku-01_sp.webp);}    
#mainvisual .main-img.interview06{background-image: url(../picks/img/chue-pj/chue-pj-main_sp.webp);}  
#mainvisual .main-img.taimatsu{background-image: url(../picks/img/taimatsu/img-taimatsu-01_sp.webp);} 
#mainvisual .main-img.miyazato{background-position: 37% 50%;}    
#mainvisual .main-img.action-3{background-position: 70% 50%;}   
#mainvisual .main-img.forum{
    background-image: url(../picks/img/forum/img-forum-01_sp.webp);
    height: 50vh;}   
#mainvisual .main-img.rokuro{background-image: url(../picks/img/rokuro/img-rokuro-01_sp.webp);}  
#mainvisual .main-img.hayashike{
    background-image: url(../picks/img/hayashike/img-hayashike-01_sp.webp);
    height: 50vh;}      
#mainvisual .main-img.manner{background-position: 60% 50%;}    
}

/*layout*/

.layout {
  margin-top: 150px;
  margin-bottom: 150px;
}
.layout:first-child {
  margin-top: 100px;
}
.layout p {
  font-size: 1.5rem;
  line-height: 2.5;
}
.layout p:lang(en){
    font-size: 1.6rem;
    text-align: left;
    word-break: break-word
}
.layout p + p {
  margin-top: 1.8em;
}
.layout figure {
  margin-top: 70px;
}
.layout figure figcaption {
  font-size: 1.4rem;
  margin-top: 20px;
  text-align: center;
  line-height: 1.8;
}
.layout figure figcaption:lang(en) {
    text-align: left;
    word-break: break-word
}
.layout figure + p {
  margin-top: 70px;
}
.layout figure + .blurTrigger {
  margin-top: 70px;
}
.layout02 {
  margin-bottom: 100px;
}
.layout02:last-child {
  margin-bottom: 0;
}
.layout02 .title-sub {
  font-size: 2rem;
  line-height: 1.8;
  margin-bottom: 35px;
}
.layout02 p {
  font-size: 1.5rem;
  line-height: 2.5;
}
.layout02 figure {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 50px;
}
.layout02 figure img {
  width: 48%;
}

.layout03 .left{
float: left;
width: 45%;
margin: 0 35px 15px 0;
}



@media only screen and (max-width:640px) {
  .layout {
margin-top: 110px;
    margin-bottom: 110px;
  }
  .layout:first-child {
    margin-top: 80px;
  }
  .layout p {
    /*font-size: 1.2rem;*/
    font-size: 1.4rem;  
    line-height: 2.5;
    padding: 0 1.5em;
  }
  .layout figure figcaption {
    font-size: 1.2rem;
    padding: 0 1.5em;
    text-align: left;
  }
  .layout02 .title-sub {
    font-size: 1.5rem;
    padding: 0 1.2em;
  }
  .layout02 p {
    font-size: 1.2rem;
    padding: 0 1.5em;
  }
  .layout02 figure {
    flex-direction: column;
  }
  .layout02 figure img {
    width: 100%;
  }
  .layout02 figure img + img {
    margin-top: 15px;
  }
    .layout03.btimg{
    display: flex;
    flex-direction: column-reverse;
    }
    .layout03.btimg figure + .blurTrigger{
    margin-top: 0;
    }
    .layout03 .left{
float: none;
width: 100%;
margin: 70px 0 0 0 ;    
    }
.layout03 .left.half{
   width: 60%;
margin: 70px auto 0 ;    
    }
}


/*interview*/

#picks-detail #interview .inner {
  max-width: 1000px;
  padding: 0 50px;
}
@media only screen and (max-width:640px) {
#picks-detail #interview .inner {
    width: 100%;
    padding: 0;
  }
#action .blurTrigger{margin-bottom: 2rem}    
}

/*sub-cont*/

#sub-cont {
  padding-top: 50px;
}
#sub-cont .inner {
  border-top: 1px solid #c8c8c8;
  max-width: 1100px;
  padding: 100px 50px 50px;
}
#sub-cont .title {
  text-align: left;
}
@media only screen and (max-width:640px) {
  #sub-cont .inner {
    padding: 80px 0;
  }
  #sub-cont .title {
    padding: 0 1.2em;
  }
}


.ul-list li{
    font-size: 15px;
    line-height: 2
}
@media only screen and (max-width:640px) {
.ul-list{
    line-height: 2.5;
    padding: 0 1em;
}
.ul-list li{font-size: 1.2rem;}    
}

/*footer*/

footer{
    margin-top: 180px;
margin-bottom: 100px;

}
@media only screen and (max-width: 640px){
footer {
  margin-top: 80px;
  margin-bottom: 80px;
}
}


/*en*/

.en h1 img{
    max-width: 210px ;
}
.en h2 p,.en h3{
letter-spacing: 0 !important;
}



/*---------------------------------------------
	取り組み
  ---------------------------------------------*/
#action section .inner {
    max-width: 800px;
}
/*見出し*/

#action h1 {
  position: absolute;
  top: 12px;
  z-index: 4;
}
#action h1.enlogo {
  top: 17px;
}
#action h1.active {
  z-index: 1;
}
#action h1 img {
  max-width: 170px;
}
#action h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 100px;
  letter-spacing: 0;
}
#action h2::before{
content: none;
}
#action h2 span {
  font-size: 1.8rem;
  display: block;
  margin-top: 30px;
margin-bottom: 100px;
}

#action h2 p{
    font-size: 2.8rem;
    text-align: center;
    line-height: 1.8;
}
#action h3 {
    font-size: 1.9rem;
    margin-bottom: 70px;
    line-height: 1.8;
}

#action-intro .txt-18 a{
    font-size: 1.8rem;
}
#action-intro .txt-18{
    margin-bottom: 8rem;
}
.inner-main {
  max-width: 1000px;
  padding: 0 50px;
}

#action #action-main h2 p{
    font-size: 3.5rem;
    text-align: center;
    margin: 0 auto;
}
#action #action-main h2 p:lang(ja){
    letter-spacing: 0.05em;
}
#action #action-main h2{margin-bottom: 0px}
/*#action #action-main h3{
    margin-top: 0rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    padding-left: 1.5em;
    text-indent: -1.5em;
}
#action #action-main h3::before {
  content: "●";
  color: #fff100;
  padding-right: 0.5em;
}*/

#action h3.boxtitle{
    max-width: 800px;
    padding: 0.8em 1.5em;
    ;
    border: 1px solid;
    font-size: 2.2rem;
    text-align: center;
    margin: 0 auto 50px;
    letter-spacing: 0.05em;
}

#action #action-main p.title{
    font-size: 2rem;
    text-align: center;
    margin: 0 auto 20px;
    letter-spacing: 0.05em;
}
#action article + article{margin-top: 15rem}
#action article .block-photo{margin-top: 20px}
.box-bg{
    background-color: #f8f8f8;
    padding: 2.5rem 1rem;
}
@media only screen and (max-width:640px) {
#action section .inner{ width: 90%;}    
#action article + article {margin-top: 8rem;}    
#action article .block-photo{margin-top: 0px}    
#action h1 img {width: 70%;}
#action h2 {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 35px;
    margin-top: 30px;
  }
#action h2 p{
    font-size: 2rem;
    letter-spacing: -0.03em;
    margin-bottom: 15px;
    }
#action h2 p:lang(en){font-size: 1.8rem;} 
#action h2 span {
    font-size: 1.3rem;
    margin-bottom: 0;
     margin-top: 15px; 
  }  
#action h3 {font-size: 1.5rem;}     
.inner-main {padding: 0 20px;}    
#action .layout p{padding: 0}   
#action #action-main h2 p{font-size: 2.2rem}    
#action h3.boxtitle{
    font-size: 1.65rem;
    padding: 8px;
    line-height: 1.5;
    margin-bottom: 20px;
    word-break: break-word;
}  
#action #action-main p.title {font-size: 1.65rem;}    
}


/* マナー */
.block3{width: calc(100% / 3)}
@media only screen and (max-width:640px) {
.block3{width:100%;}    
}