@charset "UTF-8";

/* ---------------------------------------------------------------------------------------
   #unique (ABOUT)
   ------------------------------------------------------------------------------------ */


/* #Header（g-header）
  -------------------------------------------------------------------------- */
.kv{
background: linear-gradient(0deg, rgba(131,225,186,0.9) 10%, rgba(131,225,186,0) 70%),url("../img/about/bg_kv.jpg") no-repeat center center;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.kv{
background: linear-gradient(0deg, rgba(131,225,186,0.9) 10%, rgba(131,225,186,0) 80%),url("../img/about/bg_kv.jpg") no-repeat center center;
}
	
}



/* #sec01
  -------------------------------------------------------------------------- */
.sec01{ 
padding:70px 0;
}
.sec01-in{
width:100%;
position:relative;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.sec01{ 
padding:40px 0 60px;
}
	
}



/* #sec02
  -------------------------------------------------------------------------- */
.sec02{ 
padding:90px 0 70px;
}
.sec02-in{
width:100%;
position:relative;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.sec02{ 
padding:70px 0 60px;
}
	
}



/* #sec-reserved
  -------------------------------------------------------------------------- */
.sec-reserved{
padding:60px 0;
}
.sec-reserved-in{
width:100%;
position:relative;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.sec-reserved{
padding:60px 0;
}
	
}



/* #sec in ...
  -------------------------------------------------------------------------- */


/*doc
---
name: txt + image
category: general
tag: text + img
---
*/

/* txt */
.txt{
width:47.5%;
position:relative;
z-index:100;
}
.txt.L{
float:left;
}
.txt.R{
float:right;
}
.txt h3{
font-size:2.1rem;
letter-spacing:6px;
line-height:2.2;
color:#111;
}
.txt h3.s-padding-bottom{
padding-bottom:1em;
}
.txt p{ 
margin-top:26px;
line-height:2.2;
text-align:justify;
}
.txt p b{ 
font-weight:bold;
}
.txt li:first-child{
margin-right:2%;
}
.txt .image-sub{ 
width:100%;
margin-top:50px;
}
.txt .image-sub li{ 
float:left;
width:48%;
max-width:300px;
}
.txt .image-sub li:first-child{
margin-right:4%;
}
.txt .image-sub img{
width:100%;
height:auto;
border-radius:30px;
}
.txt .image-sub.only-sp{
display:none;
}
.txt .image-sub-3rows{ 
width:100%;
margin-top:50px;
}
.txt .image-sub-3rows li{ 
float:left;
width:30.6%;
max-width:300px;
margin-right:4%;
}
.txt .image-sub-3rows li:last-child{
margin-right:0;
}
.txt .image-sub-3rows img{
width:100%;
height:auto;
border-radius:30px;
}
.txt .image-sub-3rows.only-sp{
display:none;
}

/* image */
.image{
width:47.5%;
max-width:520px;
}
.image.X-ultra{
position:relative;
}
.image.L{
float:left;
}
.image.R{
float:right;
}
.image.s-margin-top{
margin-top:28px;
}
.image img{
width:100%;
height:auto;
border-radius:30px;
}
.image .image-sub{ 
width:100%;
margin-top:24px;
}
.image .image-sub li{ 
float:left;
width:48%;
max-width:300px;
}
.image .image-sub li:first-child{
margin-right:4%;
}
.image .image-sub img{
width:100%;
height:auto;
border-radius:30px;
}
.image .image-sub-3rows{ 
width:100%;
margin-top:24px;
}
.image .image-sub-3rows li{ 
float:left;
width:30.6%;
max-width:300px;
margin-right:4%;
}
.image .image-sub-3rows li:last-child{
margin-right:0;
}
.image .image-sub-3rows img{
width:100%;
height:auto;
border-radius:30px;
}

/* ====================================================
   @media screen = max-width:1039px
   ================================================= */
@media screen and (max-width:1039px){

/* txt */
.txt{
width:50.5%;
}
.txt.half-long{
width:100%;
}
.txt.L{
padding-right:3%;
}
.txt.R{
padding-left:3%;
}
.txt h3{
padding-top:10px;
}
.txt p{
margin-top:20px;
}
.txt .image-sub.only-sp,
.txt .image-sub.only-sp-3rows{
display:none;
}

/* image */
.image{
width:47.5%;
}
.image .image-sub,
.image .image-sub-3rows{ 
margin-top:24px;
}
.image.no-tb{
display:none;
}

}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

/* txt */
.txt{
width:100%;
}
.txt.L{
float:none;
padding-right:0;
}
.txt.R{
float:none;
padding-left:0;
}
.txt h3{ 
padding-top:30px;
font-size:1.5rem;
}
.txt h3.s-padding-bottom{
padding-bottom:0;
}
.txt p{
font-size:1.2rem;
}

.txt .image-sub.only-sp,
.txt .image-sub-3rows.only-sp{
display:block;
}

/* image */
.image{
width:100%;
margin-bottom:10px;
margin:0 auto;
}
.image.L{
float:none;
}
.image.R{
float:none;
}
.image .image-sub,
.image .image-sub-3rows{
margin-top:16px;
}
.image .image-sub.no-sp,
.image .image-sub-3rows.no-sp{
display:none;
}
	
}


/*doc
---
name: morebtn
category: general
tag: button
---
*/
.morebtn{
margin-top:30px;
width:45%;
letter-spacing:2px;
float:left;
}
.morebtn.single{
margin:30px auto 0;
width:100%;
float:none;
}
.morebtn a {
background-color: #fff;
border: 1px solid #333;
color: #333;
line-height: 42px;
width:100%;
}
.morebtn a:hover {
background-color: rgba(51,51,51,1);
border-color: #333;
color: #fff;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.morebtn{
width:49%;
}
.morebtn a{
font-size:1.3rem;
}

}


/*doc
---
name: g-heading
category: general
tag: ttl parts
---
*/
.g-heading{
position:relative;
width:100%;
padding-bottom:120px;
text-align:right;
}
.g-heading h2{
font-size:3rem;
line-height:2;
letter-spacing:12px;
padding-bottom:40px;
}
.g-heading h2 span{
border-bottom:1px solid #eee;
padding-bottom:30px;
}
.g-heading .h2-sub{
font-size:1.3rem;
font-weight:bold;
}

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){

.g-heading h2{
font-size:2.6rem;
line-height:2;
letter-spacing:8px;
padding-bottom:40px;
}
.g-heading h2 span{
border-bottom:1px solid #eee;
padding-bottom:30px;
}
.g-heading .h2-sub{
font-size:1.3rem;
}

}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.g-heading{
padding-bottom:80px;
text-align:left;
}
.g-heading h2{
font-size:1.8rem;
line-height:2;
letter-spacing:6px;
padding-bottom:20px;
}
.g-heading h2 span{
border-bottom:none;
padding-bottom:0;
}
.g-heading .h2-sub{
font-size:1.2rem;
border-top:1px solid #eee;
padding-top:20px;
}
	
}


/*doc
---
name: g-heading-mid
category: general
tag: ttl parts
---
*/
.g-heading-mid{
position:relative;
width:100%;
}
.g-heading-mid .more{
top:0;
right:0;
position:absolute;
z-index:1;
}
.g-heading-mid .more .more-link{
font-size:1.1rem;
letter-spacing:3px;
}
.g-heading-mid .more .more-link a{
color:#111;
transition: opacity 0.2s;
}
.g-heading-mid .more .more-link a:hover{
opacity:0.6;
}
.g-heading-mid .more .more-link i{
position:relative;
top:4px;
left:0;
color:#666;
}

.g-heading-mid h4{
font-size:2rem;
letter-spacing:5px;
padding-bottom:0.5em;
}
.g-heading-mid .h4-sub{
font-size:1rem;
letter-spacing:10px;
padding-bottom:3em;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.g-heading-mid .more{
display:none;
}

.g-heading-mid h4{
font-size:1.4rem;
padding-bottom:0;
}

}


/*doc
---
name: half-long
category: general
tag: table
---
*/
table.half-long{
width:100%;
font-size:1.3rem;
margin-top:30px;
}
table.half-long:nth-child(1){
margin-right:2%;
}

table.half-long th{
font-weight:bold;
width:34%;
padding:10px 0 10px 0;
vertical-align:top;
}
table.half-long td{
width:58%;
padding:10px 0 10px 0;
}
table.half-long td b{
font-weight:bold;
}
table.half-long tr {
border-bottom:1px dotted #ccc;
}
table.half-long tr:first-child {
border-top:1px dotted #ccc;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

table.half-long{
font-size:1.2rem;
}
table.half-long th{
padding:7px 0 7px 0;
}
table.half-long td{
padding:7px 0 7px 0;
}
	
}



/*doc
---
name: ultra
category: unique
tag: img
---
*/
.image.X-ultra .ultra{
width: 200px;
position: absolute;
right:20px;
bottom:-90px;
}

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){

.image.X-ultra .ultra{
width: 180px;
right:20px;
bottom:-90px;
}

}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.image.X-ultra .ultra{
width: 130px;
right:20px;
bottom:-30px;
}
	
}