@charset "utf-8";

#head_line{
	background-image: url(../img/index_main.jpg);
}
.headline_text {
    font-weight: bold !important;
}

.tn_wrapper {
 position: relative;
 width: 1230px;
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
 font-family: "Noto Sans JP", sans-serif;
 font-weight:400;
}



.tn_wrapper .tn_text {
 position: relative;
 z-index: 2;
 background-color: #FFF;
 color: #133263;
}


.tn_wrapper h2 {
 line-height: 1.25;
 font-weight: bold;
 letter-spacing: .05em;
}

 .head_line {
 line-height: 1;
 font-weight: bold;
 }


@media screen and (min-width: 769px){
.headline_text { font-size: 42px !important; letter-spacing: .1em; }
.tn_wrapper.-section01 { margin-top: 120px; padding: 23% 0 50px; }    
.tn_wrapper.-section02 { margin-top: 60px; padding: 23% 0 50px; }      
    
.tn_wrapper .tn_photo { position: absolute; z-index: 1; }    
.tn_wrapper.-section01 .tn_photo { left: 0; top: 0; width: 65%; }
.tn_wrapper.-section02 .tn_photo { right: 0; top: 0; width: 65%; }
    

.tn_wrapper .tn_text { padding: 50px 40px; }    
.tn_wrapper.-section01 .tn_text { margin-left: auto; width: 47.15%; }    
.tn_wrapper.-section02 .tn_text { margin-right: auto; width: 47.15%; }
    
.tn_wrapper h2 { font-size: 40px; }
.tn_wrapper .tn_text p { margin-top: 1em; }      
.tn_wrapper .tn_text p span { display: inline-block; }  
    
}
@media screen and (max-width: 768px){
.headline_text { font-size: 24px !important; letter-spacing: .1em; }        
.tn_wrapper{ margin: 60px auto 0; } 
.tn_wrapper .tn_text { margin-top: 25px; }
.tn_wrapper h2 { font-size: 22px; }   
.tn_wrapper .tn_text p { margin-top: 1em; line-height: 2; }
}



.tn2_wrapper {
 position: relative;
 width: 1230px;
 margin-left: auto;
 margin-right: auto;
 font-family: "Noto Sans JP", sans-serif;
 font-weight:400;
}

.tn2_wrapper p {
 color: #133263;
 line-height: 2;
}

.tn2_box {
 position: relative;
}

.tn2_wrapper h2 { background-color: #133263; color: #FFF; }
.tn2_wrapper h3 {  color: #133263; font-weight: bold; line-height: 1.25; }




@media screen and (min-width: 769px){
.tn2_wrapper { margin-top: 60px;max-width: 80%; }    
.tn2_box + .tn2_box { padding: 50px 0 0 380px; }

    
.tn2_wrapper h2 { 
 position: absolute;
 left: 0;
 top: 0;
 width: 320px; 
 padding: 50px 40px;
 box-sizing: border-box;
}
.tn2_wrapper h2 span { 
 display: inline-block;
 font-size: 40px;
 font-weight: bold;
 line-height: 1.25;
}
    
.tn2_block {
 position: relative;
 margin-top: 60px;
 padding-right: 220px;
 }

 .tn2_wrapper h3 { font-size: 32px;}
 .tn2_wrapper h3 + p { margin-top: 25px; }
 .tn2_block .-photo {
  position: absolute;
  right: 0;
  top: 0;
  width: 180px;
 }
}


@media screen and (max-width: 768px){
    .tn2_wrapper {
        margin-top: 40px; max-width: 100%;
    }
    
    
    
 .tn2_wrapper h2 {
  padding: .5em 1em;
     text-align: center;
 }
.tn2_wrapper h2 span { 
 display: inline-block;
 font-size: 20px;
 font-weight: bold;
 line-height: 1.25;
}
 .tn2_wrapper h2 span + span { 
 margin-left: .5em;
}
    
 .tn2_wrapper h2 + p { 
     max-width: 80%;
 margin: 1.5em auto 0;
}    
    
 .tn2_block {
 max-width: 80%;
 margin: 30px auto 0;   
 }    
 .tn2_wrapper h3 { font-size: 20px;}
 .tn2_wrapper h3 + p { margin: 1.5em auto 0; }  
    
    
.tn2_block .-photo {
 width: 240px;
 max-width: 80%;
 margin: 30px auto 0;
 }
}



.tn3_wrapper {
 position: relative;
 width: 1230px;
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
 font-family: "Noto Sans JP", sans-serif;
 font-weight:400;
 color: #133263;
}


.tn3_wrapper h2 {
 font-weight: bold;
}

.greenkey_link {
 position: relative;
 display: inline-block;
 font-weight: 700;
 padding-left: 1.25em;
}


.greenkey_link:before {
 content: "";
 position: absolute;
 left: 0;
 top: .55em;
 display: block;
 width: .4em;
 height: .4em;
 border-bottom: solid 2px #133263;
 border-right: solid 2px #133263;
transform: rotate(-45deg);
}


@media screen and (min-width: 769px){
.tn3_wrapper { margin-top: 120px; display: flex; justify-content: space-between; }
.tn3_box.-logo {width:137px; }
.tn3_box.-text {width:calc(100% - 217px); }       
.tn3_wrapper h2 { font-size: 40px; }
.tn3_wrapper h2 + p { margin-top: 40px; }    
 .greenkey_link { margin-top: 25px; }
}


@media screen and (max-width: 768px){
.tn3_wrapper { margin-top: 120px;  display: flex; flex-direction: column; }
 .tn3_box.-logo { text-align: center; }
 .tn3_box.-logo img { max-width: 40% !important; }    
.tn3_box.-text { margin-top: 25px; }    
.tn3_wrapper h2 { font-size: 24px; }    
.tn3_wrapper h2 + p { margin-top: 1.5em; line-height: 2; }
 .greenkey_link { margin-top: 1.5em; }    
}