@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　results
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl{
  background-image:url(../image/bg_ttl_pc.jpg);  
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* results
-----------------------------------------------------------------*/
.results{
  color: #FFF;  
}

.results h2.txt-lead{
  margin-bottom: 30px;
  font-size: 3.4rem;
  color: #C2A13C;
  text-align: center;
  font-weight: normal;
}
.results h2.txt-lead+.txt{
  margin-bottom: 70px;
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}

/* intro */
.intro{
  padding: 150px 0 40px;  
}


/* s_haseko
------------------------------ */
/*

.c-inner-90 {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
*/
.s_haseko {
    padding: 0 0 60px;
}
.s_haseko .c-heading-l {
    margin-bottom: 30px;
    font-size: 3.4rem;
    color: #C2A13C;
    text-align: center;
}
.s_haseko .haseko_logo{
   width: 50%;
   max-width: 240px;
   margin: 0 auto 40px;
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
}
@media screen and (min-width: 1000px){
.s_haseko .haseko_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .s_haseko .haseko_wrap .haseko_txt {
    width: 54%;
      font-size: 1.6rem;
      line-height: 1.8
  }

  .s_haseko .haseko_wrap .haseko_network {
    width: 37.5%;
    margin: 0;
  }
}


/* s_branchera
------------------------------ */
.s_branchera {
  padding: 70px 0 0;
}
.s_branchera .c-heading-l {
  margin-bottom: 100px;
    font-size: 3.4rem;
    color: #C2A13C;
    text-align: center;
    line-height: 
}
.s_branchera .branchera_concept {
  background-color: rgba(255,255,255,.1);
  position: relative;
  padding: 90px 50px;
  width: 90%;
  max-width: 760px;
  margin: 0 auto 100px;
  color: #000;
}
.s_branchera .branchera_concept::before,
.s_branchera .branchera_concept::after {
  content: '';
  display: block;
  position: absolute;
  width: 30%;
  height: 93%;
}
.s_branchera .branchera_concept::before {
  left: -10px;
  top: -10px;
  border-top: 1px solid rgba(225, 225, 225);
  border-left: 1px solid rgba(225, 225, 225);
}
.s_branchera .branchera_concept::after {
  right: -10px;
  bottom: -10px;
  border-bottom: 1px solid rgba(225, 225, 225);
  border-right: 1px solid rgba(225, 225, 225);
}
.s_branchera .branchera_concept .branchera_concept_logo {
  width: 60%;
  max-width: 240px;
  margin: 0 auto;
}
.s_branchera .branchera_concept .branchera_concept_mi {
  text-align: center;
  line-height: 1.4;
  color: #C2A13C;
  font-size: 190%;
  margin: 50px 0;
}
.s_branchera .branchera_concept .branchera_concept_txt{
  line-height: 2.2;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
}

.branchera_txt{
    font-size: 1.6rem;
    line-height: 1.85
}
/*jisseki*/

.s_branchera .branchera_jisseki {
  margin-top: 50px;
}
.s_branchera .branchera_jisseki > li {
  width: 75%;
  margin: 0 auto 30px;
  color: #fff;
}
.s_branchera .branchera_jisseki_name {
  line-height: 1.4;
  margin: 10px 0 5px;
}
.s_branchera .branchera_jisseki_info {
  font-size: 85%;
  line-height: 1.4;
}

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

  .s_branchera .branchera_jisseki {
    display: flex;
    flex-wrap: wrap;
  }
  .s_branchera .branchera_jisseki > li {
    margin: 0 0 40px;
    width: 49%;
  }
  .s_branchera .branchera_jisseki > li:nth-child(1),
  .s_branchera .branchera_jisseki > li:nth-child(3) {
    margin-right: 2%;
  }
}
@media screen and (min-width: 1000px){
  .s_branchera .branchera_jisseki > li:nth-child(1),
  .s_branchera .branchera_jisseki > li:nth-child(2) {
    width: 28.33333333%;
  }
  .s_branchera .branchera_jisseki > li:nth-child(3),
  .s_branchera .branchera_jisseki > li:nth-child(4) {
    width: 18.66666667%;
  }
  .s_branchera .branchera_jisseki > li:nth-child(2) {
    margin-right: 2%;
  }
}

/*jisseki*/

@media screen and (max-width: 768px) {
.s_haseko {
    padding: 0 0 20px;
}
.s_haseko .c-heading-l {
    margin-bottom: 40px;
    font-size: 2.0rem;
}
.s_branchera {
  padding: 40px 0 0;
}
.s_branchera .c-heading-l {
   margin-bottom: 60px;
    font-size: 2.0rem;
}    
.s_branchera .branchera_concept {
    position: relative;
    padding: 19% 7.5% 14%;
    width: 90%;
    max-width: 760px;
    margin: 0 auto 60px;
    color: #08316d;
}
    
.branchera_concept_logo {
    width: 60%;
    max-width: 240px;
    margin: 0 auto;
}
.s_branchera .branchera_concept .branchera_concept_mi {
    font-size: 145%;
    text-align: center;
    line-height: 1.4;
    margin: 35px 0;
}
.s_branchera .branchera_concept .branchera_concept_txt{
  line-height: 1.8;
    text-align: left;
    font-size: 1.3rem;
}
.branchera_txt{
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
}
    
}


.s_haseko .haseko_wrap .haseko_network {
  max-width: 450px;
  margin: 15px auto 0;
}
.s_haseko .haseko_logo{
   width: 60%;
   max-width: 240px;
   margin: 0 auto 0px;
   background-color: #fff;
   padding: 10px 20px;
}
.s_haseko .haseko_logo .haseko_txt{
   font-size: 1.3rem
}
.s_haseko .haseko_wrap .haseko_network {
  max-width: 450px;
  margin: 15px auto 0;
}

    
}

/* safety */
.safety{
  padding: 40px  0 95px;  
}
.safety .txt-lead{
  margin-bottom: 20px;
  font-size: 2.3rem;
  line-height:1.6;
  text-align:center;
  font-weight: 500;  
}
.safety .txt-lead +.txt{
  margin-bottom: 25px;
  font-size: 1.6rem;
  line-height:2.2;
  text-align:center;  
}

.basis{
  max-width: 1000px;
  margin: 0 auto 95px;
  background: #E9EAEA;  
}
.basis .pic-area{
  width: 32%;
}
.basis .pic-area h3{
  padding: 3px 15px;
  background : linear-gradient(90deg, rgba(116, 132, 139, 1) 0%, rgba(75, 129, 153, 0) 100%);
  background : -moz-linear-gradient(0% 50% 0deg,rgba(116, 132, 139, 1) 0%,rgba(75, 129, 153, 0) 100%);
  background : -webkit-linear-gradient(0deg, rgba(116, 132, 139, 1) 0%, rgba(75, 129, 153, 0) 100%);
  font-size: 2.6rem;
  font-weight: 500;
}
.basis .pic-area .pic{
  padding: 5px;  
}
.basis dl{
  width: 68%;
  padding: 15px 15px 15px 0;
  color: #231815;  
}
.basis dl > div:nth-child(n+2){
  margin-top: 15px;  
}
.basis dl dt{
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid;  
  line-height:1.4;
}
.basis dl dt .ttl{
  padding-right: 10px;
}
.basis dl dt .txt{
  font-size: 1.8rem;  
}
.basis dl dd ul{
  display: flex;
  justify-content: space-between; 
}
.basis dl dd ul li{
  max-width: 208px;
  width: calc((100% - 20px)/3);  
}
.basis dl dd ul h4{
  padding: 2px 5px;
  background: repeat-x;
  background-size: auto 100%;
  text-align: center;
  font-size: 1.5rem;
  color: #FFF;
  font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;  
}
.basis dl dd ul p{
  font-size: 1.5rem;
  line-height:1.4;  
}

.basis .basis01 ul li:nth-child(1) p span{
	display:block;	
}

.basis .basis01 dt{
  border-bottom-color: #709AAF;  
}
.basis .basis02 dt{
  border-bottom-color: #B27883;  
}
.basis .basis03 dt{
  border-bottom-color: #C39858;  
}

.basis .basis01 dd ul h4{
  background-image:url(../image/bg_basis01.png);
}
.basis .basis02 dd ul h4{
  background-image:url(../image/bg_basis02.png);
}
.basis .basis03 dd ul h4{
  background-image:url(../image/bg_basis03.png);
}
@media screen and (max-width: 768px) {
.basis{
  margin: 0 0 40px;  
}
}
/* shikoku */
/* results_shikoku
-----------------------------------------------------------------*/
.results_shikoku{
  color: ##11193B;
/*  background: url(../image/bg_active.jpg);*/
  background: url(../image/bg_cont.jpg);
}

.results_shikoku h2.txt-lead{
  margin-bottom: 30px;
  font-size: 3.4rem;
  color: ##11193B;
  text-align: center;
  font-weight: normal;
}
.results_shikoku h2.txt-lead+.txt{
  margin-bottom: 70px;
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}

.shikoku{
  padding: 95px  0 95px;
}
.shikoku ul{
  display: flex;
  justify-content: space-between;  
}
.shikoku ul li:nth-child(1){
  width: 40.84%;  
}
.shikoku ul li:nth-child(2){
  width: 23.67%;  
}
.shikoku ul li:nth-child(3){
  width: 32%;  
}
.shikoku ul .pic{
  margin-bottom: 10px;  
}
.shikoku ul .txt{
  font-size: 1.6rem;
  line-height:1.5;  
}
.shikoku ul .txt small{
  display: block;
  font-size: 1.3rem;    
}

/* cm */
.cm{
	width: 90%;
	margin: 95px auto 100px;}

.cm h2.txt-lead{
	margin-bottom: 0;}

.cm .clmBox{
	display: flex;
  justify-content: center;
  gap: 3%;
	/* flex-wrap: wrap; */
}

.cm .clmBox.clm3_n > div {
  margin-top: 5rem;
	width: 32%;
}
.cm .clmBox .clmName {
    margin-top: 1.5rem;
    padding-left: 1.4rem;
    border-left: 1px solid #605939;
}
.cm .clmBox .clmName .name {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .18em;
    color: #afa061;
    margin-top: -.4rem;
    margin-bottom: -.4rem;
}
/* .cm .clmBox:after {
    content: "";
    display: block;
    width: 32%;
    height: 0;
} */














/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


	.page-ttl{
		background-image:url(../image/bg_ttl_sp.jpg);  
	}



/* results
-----------------------------------------------------------------*/
	
	.results h2.txt-lead{
    margin-bottom: 15px;
    font-size: 2.4rem;
    line-height: 1.5;
	}
	.results h2.txt-lead+.txt{
    margin-bottom: 30px;
    font-size: 1.5rem;
    line-height: 2;
	}

/* intro */
	.intro{
		padding: 50px 0 20px;  
	}

.s_haseko .haseko_logo{
    margin-bottom: 40px
 }

/* safety */
	.safety{
		padding: 25px  0 20px;  
	}
	.safety .txt-lead{
		margin-bottom: 15px;
		font-size: 1.8rem; 
	}
	.safety .txt-lead +.txt{
		margin-bottom: 20px;
		font-size: 1.3rem;
		line-height:1.8;  
	}
	
	.basis{
		display: block;
	}
	.basis .pic-area{
		width: 100%;
	}
	.basis .pic-area h3{
		padding: 3px 15px;
		font-size: 2rem;
	}
	.basis .pic-area .pic{
		padding: 5px;  
	}
	.basis dl{
		width: 100%;
		padding: 15px 20px; 
	}
	.basis dl > div:nth-child(n+2){
		margin-top: 25px;  
	}
	
	.basis dl dt .ttl{
		display: block;
		margin-bottom: 5px;
		padding-right: 0;
	}
	#Page .basis dl dt .ttl img{
		width: auto;
		height: 20px;	
	}
	.basis dl dt .txt{
		font-size: 1.6rem;  
	}
	.basis dl dd ul{
		display: block;
	}
	.basis dl dd ul li{
		max-width: none;
		width: 100%;  
	}
	.basis dl dd ul li:nth-child(n+2){
		margin-top: 15px;
	}
	.basis dl dd ul h4{
		margin-bottom: 5px; 
	}
	.basis dl dd ul p{
		font-size: 1.4rem;
	}
	
	.basis .basis01 ul li:nth-child(1) p span{
		text-indent:-4em;
		padding-left: 4em;
	}
	.basis .basis01 ul li:nth-child(2) p{
		text-align: center;
	}



/* shikoku */
	.shikoku{
		padding: 20px  0 40px;  
	}
	.shikoku ul{
		display: block; 
	}
	.shikoku ul li:nth-child(1){
		width: 100%;  
	}
	.shikoku ul li:nth-child(2){
		width: 100%;  
	}
	.shikoku ul li:nth-child(3){
		width: 100%;  
	}
	.shikoku ul li:nth-child(n+2){
		margin-top: 20px;
	}
	.shikoku ul .pic{
		margin-bottom: 5px;  
	}
	.shikoku ul .txt{
		font-size: 1.3rem;
	}
	.shikoku ul .txt small{
		font-size: 1rem;    
	}

.results_shikoku h2.txt-lead{
    margin-bottom: 20px;
    font-size: 2.2rem;
    margin-top: 20px;
    line-height: 1.6
}
.results_shikoku h2.txt-lead+.txt{
  margin-bottom: 30px;
  font-size: 1.5rem;
    line-height: 2;
}
	
	
	/* cm */
	.cm{
		width: 100%;
		margin: 0 auto 100px;
	}
.cm h2.txt-lead {
    margin-bottom: 0;
    margin-top: 40px
}
	.cm .clmBox{
		flex-direction: column;
	}

	.cm .clmBox.clm3_n > div {
		width: 100%;
	}
	.cm .clmBox .clmName {
	}
	.cm .clmBox .clmName .name {
	}
}


/*brand_concept*/
.intro h3{
    margin-bottom: 30px;
    font-size: 3.4rem;
    color: #C2A13C;
    text-align: center;
    font-weight: 500;
}



@media screen and (max-width: 768px) {
.intro h3{
    margin-bottom: 15px;
    font-size: 2.4rem;
}


}