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

@font-face {
font-family: "GenJyuuGothic";
font-style: normal;
font-weight: 300;
src: url('../font/GenJyuuGothic-Regular-S.woff') format('woff')
}
@font-face {
font-family: "GenJyuuGothic";
font-style: normal;
font-weight: 400;
src: url('../font/GenJyuuGothic-Medium-S.woff') format('woff')
}
@font-face {
font-family: "GenJyuuGothic";
font-style: normal;
font-weight: 500;
src: url('../font/GenJyuuGothic-Bold-S.woff') format('woff')
}
@font-face {
font-family: "GenJyuuGothic";
font-style: normal;
font-weight: 600;
src: url('../font/GenJyuuGothic-Heavy-S.woff') format('woff')
}



/* ==============================================
#about
============================================== */

#about{
padding: 0 0 60px 0;
}
#about h1,#about h2,#about h3,#about h4,#about h5,#about p,#about th,#about td,#about dt,#about dd,#about li{
font-family:"GenJyuuGothic", sans-serif;
font-weight:400;
color: #4c4c4e;
font-size: 16px;
line-height: 32px;
letter-spacing: 1px;
}
#about a{
-webkit-transition: 0.1s ease-out;
transition: 0.1s ease-out;
text-decoration:underline;
}
#about a:hover{
opacity: 0.7;
}
#about .lceil{
margin: 0 0 0 -0.4em;
}
#about .rceil{
margin: 0 -0.4em 0 0;
}
#about .sp{
display: none;
}



#about h2{
font-size: 32px;
line-height: 50px;
color: #4c4948;
font-weight: 500;
letter-spacing: 2px;
text-align: center;
}
#about h2 strong{
font-size: 16px;
line-height: 16px;
color: #ff878c;
letter-spacing: 1px;
text-align: center;
display: block;
background: url(../img/intr_dln.png) center bottom no-repeat;
padding:  0 0 30px 0;
}



#about #introduction h1{
font-size: 16px;
line-height: 16px;
color: #ff878c;
font-weight: 500;
letter-spacing: 2px;
text-align: center;
padding: 100px 0 0 0;
}
#about #introduction h1 strong{
display: block;
background: url(../img/intr_dln.png) center bottom no-repeat;
padding:  0 0 30px 0;
letter-spacing: 1px;
margin: 0 0 35px 0;
}
#about #introduction p{
font-size: 16px;
line-height: 36px;
font-weight: 300;
text-align: center;
padding: 60px 0 0 0;
}



#about #message h2{
padding: 110px 0 0 0;
}
#about #message h2 strong{
margin: 0 0 10px 0;
}
#about #message p{
font-size: 18px;
line-height: 31px;
text-align: center;
padding: 90px 0 0 0;
}
#about #message p.image{
padding: 60px 0 0 0;
}



#about #enjoy h2{
padding: 120px 0 0 0;
}
#about #enjoy h2 strong{
margin: 0 0 40px 0;
}
#about #enjoy p{
text-align: center;
padding: 40px 0 0 0;
}
#about #enjoy p.image{
}



#about #concept{
width: 1040px;
margin: 0 auto;
}
#about #concept h2{
padding: 120px 0 0 0;
}
#about #concept h2 strong{
margin: 0 0 40px 0;
}
#about #concept p.image{
text-align: center;
padding: 40px 0 45px 0;
}
#about #concept div{
background: url(../img/intr_lg_bg.png);
float: left;
width: 340px;
height: 340px;
}
#about #concept h3{
font-size: 22px;
text-align: center;
padding: 0 0 25px 0;
}
#about #concept div h4{
font-size: 24px;
line-height: 36px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
padding: 65px 0 0 0;
}
#about #concept div p{
font-size: 14px;
line-height: 28px;
text-align: justify;
text-justify: inter-ideograph;
padding: 22px 40px 0 40px;
}
#about #concept div p::first-letter {
 font-feature-settings: "palt";
}
#about #concept #concept-01{
margin: 0 10px 0 0;
}
#about #concept #concept-02{
margin: 0 10px 0 0;
}
#about #concept #concept-02 h4{
font-size: 24px;
line-height: 36px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
padding: 85px 0 16px 0;
}
#about #concept:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #about #concept { display:inline-block; }
*:first-child+html #about #concept { display:inline-block; }



#about #world{
width: 820px;
margin: 0 auto;
}
#about #world h2{
padding: 120px 0 0 0;
}
#about #world h2 strong{
margin: 0 0 40px 0;
}
#about #world p{
text-align: justify;
text-justify: inter-ideograph;
padding: 60px 0 0 0;
}
#about #world p.image{
text-align: center;
padding: 35px 0 0 0;
position: relative;
}
#about #world p.image a{
	display: block;
	padding: 0;
}
#about #world p.image a.link-01{
	position: absolute;
	top: 34px;
	left: 376px;
	width: 85px;
	height: 128px;
}
#about #world p.image a.link-02{
	position: absolute;
	top: 172px;
	left: 93px;
	width: 128px;
	height: 116px;
}
#about #world p.image a.link-03{
	position: absolute;
	top: 151px;
	left: 594px;
	width: 133px;
	height: 127px;
}
#about #world p.image a.link-04{
	position: absolute;
	top: 368px;
	left: 115px;
	width: 74px;
	height: 129px;
}
#about #world p.image a.link-05{
	position: absolute;
	top: 362px;
	left: 592px;
	width: 137px;
	height: 138px;
}
#about #world p.image a.link-06{
	position: absolute;
	top: 535px;
	left: 350px;
	width: 138px;
	height: 120px;
}

#about #service{
width:1040px;
margin:40px auto 80px auto;
}

#about #service ul{
display: flex;
max-width:1040px;
flex-wrap: wrap;
padding: 40px 0 0 0;
}


#about #service ul li{
width: 240px;
margin:10px 10px 0 10px;
background: #f2f2f2;
}
#about #service ul li dl{
padding:10px;
}
#about #service ul li dt{
font-size: 14px;
line-height: 22px;
font-weight: 500;
padding:10px;
}
#about #service ul li dd{
font-size: 12px;
line-height: 22px;
padding:0 10px 20px 10px;
}




#about #history{
width:1040px;
margin: 0 auto 80px auto;
}
#about #history h2{
padding: 120px 0 0 0;
}
#about #history h2 strong{
margin: 0 0 40px 0;
}
#about #history .inner{
width:1040px;
background: url(../img/intr_hsty_line.png)repeat-y;
background-size: 6px;
background-position: 50%;
margin: 0 auto;
position: relative;
}

#about #history .years{
width:400px;
font-size: 24px;
line-height: 24px;
font-weight: 600;
padding: 0 0 0 20px;
color: #FF878C;
left:535px;
position: relative;

}
#about #history .years::before{
content: '';
background:#FFA5AD;
width: 30px;
height: 30px;
border-radius: 15px;
position: absolute;
top:-5px;
left: -30px;	
}

#about #history .year1990,#about #history .year2000,#about #history .year2010{
position:relative;
padding:40px 0 0 0;
}

#about #history .year1990 h3{
background:url(../img/intr_hsty_bg.gif) no-repeat;
background-size:480px;
background-position:40px 0;
width:500px;
position: absolute;
padding:20px  0 ;
right: 40px;
}
#about #history .year1990 h3 dl{
padding:20px 0 0 60px;
}
#about #history .year1990 h3 dl dt{
font-size: 30px;
color: #FF878C;
text-align:left;
line-height: 24px;
font-weight: 500;
padding:0 0 20px 80px;
position: relative;
}
#about #history .year1990 h3 dl dt span{
font-size: 50px;
color: #FF878C;
text-align:left;
line-height: 24px;
font-weight: 500;
padding:0 20px 0 20px;
}
#about #history .year1990 h3 dl dt::before{
content: '';
background:  #FF878C;
width: 13px;
height: 13px;
border-radius: 6px;
position: absolute;
top:20px;
left:-42px;
}
#about #history .year1990 h3 dl dt::after{
content: '';
background:  #FF878C;
width:110px;
height:2px;
position: absolute;
top:26px;
left:-42px;
}
#about #history .year1990 h3 dl dd{
font-size: 12px;
line-height: 24px;
font-weight: 300;
padding:10px 40px 20px 70px;
margin: -10px 0 0 0;
text-align:left;
}
#about #history .year1990 h3 .magazin {
padding: 0 10px;
text-align: center;
display: flex;
justify-content: center;
width: 452px;
}
#about #history .year1990 h3 .magazin figure{
width: 155px;
padding:20px 10px;
}
#about #history .year1990 h3 .magazin figure figcaption{
font-size: 10px;
text-align: left;
}


#about #history .year1990 .container{
padding:80px 0 0 0;
}
#about #history .year1990 dl{
width: 517px;
padding:0 0 20px 17px;
}
#about #history .year1990 dl dt{
font-size: 16px;
color: #FF878C;
text-align: right;
line-height: 24px;
font-weight: 600;
padding:0 20px 0 0;
position: relative;
}
#about #history .year1990 dl dt::before{
content: '';
background:  #FF878C;
width: 13px;
height: 13px;
border-radius: 6px;
position: absolute;
top:20px;
right:-6px;
}
#about #history .year1990 dl dt::after{
content: '';
background:  #FF878C;
width:100px;
height:2px;
position: absolute;
top:26px;
right:-6px;
}
#about #history .year1990 dl dd{
font-size: 12px;
line-height: 24px;
font-weight: 300;
padding:0 100px 20px 40px;
margin: -10px 0 0 0;
text-align:right;
}


#about #history .year2000{
position: relative;
}
#about #history .year2000 .container{
position:absolute;
top:80px;
left: 505px;
}

#about #history .year2000 dl{
width: 517px;
margin: 0 0 0 0;
padding: 0 0 30px 17px;
}
#about #history .year2000 dl dt{
font-size: 16px;
color: #FF878C;
text-align: left;
line-height: 24px;
font-weight: 600;
padding:0 0 0 20px;
position: relative;
}
#about #history .year2000 dl dt::before{
content: '';
background:  #FF878C;
width: 13px;
height: 13px;
border-radius: 6px;
position: absolute;
top:20px;
left:-6px;
}
#about #history .year2000 dl dt::after{
content: '';
background:  #FF878C;
width:100px;
height:2px;
position: absolute;
top:26px;
left:-6px;
}
#about #history .year2000 dl dd{
font-size: 12px;
line-height: 24px;
font-weight: 300;
padding:0px 0px 20px 100px;
margin: -10px 0 0 0;
text-align:left;
}


#about #history .year2000 h3{
padding: 340px 0 0 0;
position:relative;
}
#about #history .year2000 h3 dl{
padding:20px 0 0 0px;
position:relative;
}
#about #history .year2000 h3 dl dt{
font-size: 30px;
color: #FF878C;
text-align:right;
line-height: 24px;
font-weight: 500;
padding:0 100px 20px 0px;
}
#about #history .year2000 h3 dt span{
font-size: 40px;
color: #FF878C;
text-align:left;
line-height: 24px;
font-weight: 500;
padding:0 20px 0 20px;
}
#about #history .year2000 h3 dt::before{
content:'';
background:#FF878C;
width: 13px;
height: 13px;
border-radius: 6px;
position:absolute;
top:20px;
left: 515px;
}
#about #history .year2000 h3 dl dt::after{
content: '';
background:  #FF878C;
width:110px;
height:2px;
position: absolute;
top:26px;
left: 415px;
}
#about #history .year2000 h3 dl dd{
font-size: 12px;
line-height: 24px;
font-weight: 300;
padding:10px 40px 20px 70px;
margin: -10px 0 0 0;
text-align:left;
}
#about #history .year2000 h3 .magazin{
padding: 0 10px;
text-align: center;
display: flex;
justify-content: center;
width: 452px;
}
#about #history .year2000 h3 .magazin figure{
width:155px;
height: 200px;
padding:20px 10px;
}
#about #history .year2000 h3 .magazin figure figcaption{
font-size: 10px;
line-height: 12px;
padding: 10px 0 0 0;
text-align: left;
}



#about #history .year2010{
margin:760px 0 0 0;
position: relative;
}

#about #history .year2010 dl{
width: 517px;
padding: 0 0 30px 17px;
}
#about #history .year2010 dl dt{
font-size: 16px;
color: #FF878C;
text-align: right;
line-height: 24px;
font-weight: 600;
padding:0 20px 0px 0;
position: relative;
}
#about #history .year2010 dl dt::before{
content: '';
background:  #FF878C;
width: 13px;
height: 13px;
border-radius: 6px;
position: absolute;
top:20px;
right:-6px;
}
#about #history .year2010 dl dt::after{
content: '';
background:  #FF878C;
width:100px;
height:2px;
position: absolute;
top:26px;
right:-6px;
}
#about #history .year2010 dl dd{
font-size: 12px;
line-height: 24px;
font-weight: 300;
padding:0 100px 20px 40px;
margin:-10px 0 0 0;
text-align:right;
}
#about #history .year2010 .last{
padding: 80px 0 0 0;
}

#about #history .year2010 .year2013{
background:url(../img/intr_hsty_bg.gif) no-repeat;
background-size:460px;
background-position:40px 0;
width:500px;
position: absolute;
padding:40px 0 60px 0;
right: 40px;
top:260px;
}
#about #history .year2010 .year2018{
background:url(../img/intr_hsty_bg.gif) no-repeat;
background-size:460px;
background-position:40px 0;
width:500px;
position: absolute;
padding:40px 0 60px 0;
bottom:-200px;
right: 40px;
}
#about #history .year2010 h3 dl{
padding:20px 0 0 60px;
}
#about #history .year2010 h3 dl dt{
font-size: 30px;
color: #FF878C;
text-align:left;
line-height: 24px;
font-weight: 500;
padding:0 0 20px 80px;
position: relative;
}
#about #history .year2010 h3 dl dt span{
font-size: 40px;
color: #FF878C;
text-align:left;
line-height: 24px;
font-weight: 500;
padding:0 20px 0 20px;
}
#about #history .year2010 h3 dl dt::before{
content: '';
background:  #FF878C;
width: 13px;
height: 13px;
border-radius: 6px;
position: absolute;
top:20px;
left:-42px;
}
#about #history .year2010 h3 dl dt::after{
content: '';
background:  #FF878C;
width:110px;
height:2px;
position: absolute;
top:26px;
left:-42px;
}
#about #history .year2010 h3 dl dd{
font-size: 12px;
line-height: 18px;
font-weight: 300;
padding:10px 40px 20px 70px;
margin:10px 0 0 0;
text-align:left;
}
#about #history .year2010 h3 .magazin {
padding: 0 10px;
text-align: center;
display: flex;
justify-content: center;
width: 452px;
}
#about #history .year2010 h3 .magazin figure{
width: 155px;
height:200px;
padding:10px;
margin: 0 0 20px 0;
}
#about #history .year2010 h3 .magazin figure figcaption{
font-size: 10px;
text-align: left;
padding:5px 0 0 0;
}


/* ==============================================
modal
============================================== */

#modal-win {
width: 100%;
position: absolute;
}
#modal-win-inner {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
margin: 0 auto;
position: relative;
z-index: 9999;
border-radius: 0;
}
#modal-bg {
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
cursor: pointer;
opacity:0.8;
}
.pp{
display:none;
width:853px;
position:relative;
background:#000;
}
.pp iframe{
width:853px;
height:480px;
vertical-align:top;
}
.pp .modal-close{
position:absolute;
top:-22px;
right:-22px;
padding:0;
text-align: center;
}
.pp .modal-close a{
display: block;
background: #ff878c;
width: 44px;
height: 44px;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #FFF;
line-height: 44px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}