@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}

@font-face {
  font-family: "Yu Mincho";
  src: local("Yu Mincho Medium");
  font-weight: 400;
}


/* Body
---------------------------------------------------------------------- */
body {
	background: #FFFFFF;
	font: 62.5%/1.6 "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: normal;
	color: #000000;
display:none;
}


/* Links
---------------------------------------------------------------------- */
a, a:visited {
	color: #1f6e91;
}
a:hover, a:focus {
	color: #000000;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/* Typography
--------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
color:#000000;
}


/* 
/* mainhead
/* =================================================================== */

#mainhead{
width: 100%;
text-align:center;
margin:0 auto;
z-index: 999;
position:relative;
max-width:768px;
}

#mainhead h1{

text-indent:100%;
white-space:nowrap;
overflow:hidden;
padding-top:142.13%;
height:0;
background: url("../../images/head_title2.jpg") center top no-repeat;
background-size:100% auto;

}

#mainhead .head_cm{
position:absolute;
top:10px;
left:0;
right:0;
font-size:1.2em;
}

#mainhead .head_copy{
padding:5px 0 10px 0;
font-size:0.9em;
}

@media only screen and (min-width:400px) and (max-width:767px) {
#mainhead .head_cm{
font-size:1.4em;
}
#mainhead .head_copy{
font-size:1em;
}

}

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

#mainhead .head_cm{
font-size:1.6em;
}
#mainhead .head_copy{
font-size:1.1em;
}
}


/* 
/* product Section
/* =================================================================== */
#product {
margin:0 auto;
text-align:center;
position:relative;
overflow:hidden;
border-bottom:3px solid #d3cc6a;
padding:15px 0 30px 0;
}

#product h2{
width:75%;
margin:0 auto;
max-width:506px;
}

#product .product-main{
padding-top:43%;
padding-bottom:20px;
background: url("../../images/product_bg.jpg") center top no-repeat;
background-size:100% auto;
max-width:768px;
margin:2% auto 0 auto;
}

#product .product-main .product_cont{
border:1px solid #a2b0c8;
font-size:1em;
width:90%;
margin:0 auto;
padding:2%;
color:#FFFFFF;
}

#product .product-ts{
width:80%;
margin:20px auto;
text-align:left;
font-size:1.1em;
color:#5d5e5e;
max-width:700px;
}

.product_bt{
width:85%;
margin:0 auto;
max-width:730px;
}

.product_bt a{
background:#000000;
font-size:1.2em;
display:block;
color:#FFFFFF;
padding:0.5em 0;
position:relative;
border:3px solid #000000;
-webkit-transition: background 0.3s ease-in-out, color 0.5s ease-in-out, font-weight 0.5s ease-in-out;
transition: background 0.3s ease-in-out, color 0.5s ease-in-out, font-weight 0.5s ease-in-out;
}

.product_bt a::after{
content:'';
color:#fff;
background: url("../../images/wh_link.png") center top no-repeat;
background-size:100% auto;
display:inline-block;
width:10px;
height:10px;
margin:0 0 0 1em;
vertical-align:middle;

}

.product_bt a:hover{
background:#FFFFFF;
color:#000000;
font-weight:bold;
}

.product_bt a:hover::after{
content:'';
background: url("../../images/bl_link.png") center center no-repeat;
width:15px;
height:15px;
}

@media only screen and (min-width:400px) and (max-width:479px) {

#product .product-main .product_cont{
font-size:1em;
width:90%;
}

}

@media only screen and (min-width:480px) and (max-width:599px) {

#product .product-main .product_cont{
font-size:1.2em;
width:85%;
}

#product .product-ts{
font-size:1.2em;
}

}

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

#product .product-main .product_cont{
font-size:1.4em;
width:80%;
}

#product .product-ts{
font-size:1.4em;
margin:40px auto;
}

.product_bt a{
font-size:1.6em;
}

.product_bt a::after{
width:14px;
height:14px;
}

.product_bt a:hover::after{
width:17px;
height:17px;
}

}

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

#product {
padding:20px 0 50px 0;
}

#product .product-main{
padding-top:340px;
padding-bottom:20px;
margin-top:15px;
}

}

/* 
/* kikaku Section
/* =================================================================== */
#kikaku {
margin:0 auto;
text-align:center;
position:relative;
overflow:hidden;
padding:30px 0;
}

#kikaku h2{
font-size:1.4em;
display:inline-block;
border-bottom:3px solid #d3cc6a;
padding-bottom:0.5em;
}

#kikaku .kikaku-com{
padding:20px 0 0 0;
font-size:1.1em;
width:90%;
margin:0 auto;
}

#kikaku .kikaku-com ruby{
ruby-align:center;
}

#kikaku .kikaku-com rt{
font-size:0.8em;
padding-top:0.5em;
}

#kikaku .kikaku-cap{
padding:0.5em 0 25px 0;
font-size:1em;
width:90%;
margin:0 auto;
color:#666666;
}

#kikaku .kikakuImg{
position:relative;
max-width:600px;
margin:0 auto;
width:90%;
}

#kikaku .kikakuImg dl{
position:absolute;
bottom:0;
left:0;
background-color:rgba(0,0,0,0.8);
width:100%;
color:#FFFFFF;
padding:5px 0 10px 0;
}

#kikaku .kikakuImg dl dt{
font-size:1.6em;
border-bottom:1px solid #FFFFFF;
}

#kikaku .kikakuImg dl dt span{
font-size:60%;
}

#kikaku .kikakuImg dl dd{
font-size:1em;
padding-top:10px;
}

@media only screen and (max-width:356px) {

#kikaku .kikaku-com{
font-size:1em;
}

#kikaku .kikakuImg dl dd{
font-size:0.9em;
}

}


@media only screen and (min-width:480px) and (max-width:599px) {


#kikaku h2{
font-size:1.6em;
}

#kikaku .kikaku-com{
padding:20px 0 0 0;
font-size:1.2em;
}

#kikaku .kikaku-cap{
padding:0.5em 0 25px 0;
font-size:1.1em;
width:90%;
margin:0 auto;
color:#666666;
}

#kikaku .kikakuImg dl{
padding:10px 0 15px 0;
}

#kikaku .kikakuImg dl dt{
font-size:1.8em;
}

#kikaku .kikakuImg dl dd{
font-size:1.1em;
}

}

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

#kikaku {
padding:50px 0;
}

#kikaku h2{
font-size:1.8em;
}

#kikaku .kikaku-com{
padding:20px 0 0 0;
font-size:1.4em;
}

#kikaku .kikaku-cap{
padding:0.5em 0 25px 0;
font-size:1.3em;
width:90%;
margin:0 auto;
color:#666666;
}

#kikaku .kikakuImg dl{
padding:15px 0 20px 0;
}

#kikaku .kikakuImg dl dt{
font-size:2.2em;
}


#kikaku .kikakuImg dl dd{
font-size:1.3em;
}

}

/* 
/* interview Section
/* =================================================================== */
#interview {
margin:0 auto;
text-align:center;
position:relative;
overflow:hidden;
}

/* 
/* first Section
/* =================================================================== */
#first, #second, #third {
margin:0 auto;
text-align:center;
position:relative;
overflow:hidden;
background:#f3f3f3;
}



h3{
font-size:1.2em;
background:#000000;
color:#FFFFFF;
border-top:4px solid #d3cc6a;
padding:14px 10px;
text-align:left;
margin:0 auto 20px auto;
}

h3 .nmtL{
max-width:700px;
margin:0 auto;
}

h3 .new{
font-size:90%;
background:#dd0b24;
padding:3px 5px;
margin-right:0.5em;
}

/* 
/* video Section
/* =================================================================== */


.contens_video{
width:80%;
margin:0 auto 30px auto;
max-width:700px;
}

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
overflow:hidden;
height:0;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.zoom{
display:inline-block;
position:relative;
max-width:500px;
margin:0 auto;
width:80%;
}

.zoom img{
display:block;
}

.zoom img::selection {
background-color:transparent;
}


.stb{
width:90%;
margin:0 auto;
padding:20px 0 30px 0;
max-width:700px;
}

.stb img{
width:100%;
display:block;
}

.stb .stbimgt{
margin-top:15px;
}

.stb dl.nm{
font-size:1.1em;
color:#3d3d3d;
padding:20px 0 0 0;
}

.stb dl.nm dt{
}

.stb dl.nm dd{
text-align:left;
}

.stb dl.nm dd.stblink{
margin-top:2em;
padding-left:20px;
background: url("../../images/bl_link.png") 5px center no-repeat;
background-size:10px auto;
line-height:1.2;
}


.stb dl.pm{
font-size:1.1em;
color:#3d3d3d;
padding:20px 0 0 0;
}

.stb dl.pm dt{
text-align:left;
padding-bottom:1em;
}

.stb dl.pm dd{
}

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

h3{
font-size:1.4em;
}

.stb dl.nm, .stb dl.pm{
font-size:1.2em;
}

}

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

h3{
font-size:1.6em;
}

.contens_video{
width:80%;
}

.zoom{
width:80%;
}

.stb{
width:80%;
margin:0 auto;
padding:20px 0;
}

.stb{
padding:20px 0 50px 0;
}

.stb dl.nm, .stb dl.pm{
font-size:1.4em;
}

.stb dl.nm dd.stblink{
padding-left:25px;
background: url("../../images/bl_link.png") 5px center no-repeat;
background-size:13px auto;
line-height:1.2;
}

}






/* 
/* footer Styles
/* =================================================================== */
#footer {
width:100%;
padding: 0;
margin:0;
position: relative;
text-align:center;
}

.nextsty{
width:90%;
max-width:700px;
margin:30px auto 80px auto;
border:5px solid #d3cc6a;
padding:20px 0;
font-size:1.4em;
}

.nextsty span{
padding-left:20px;
background: url("../../images/bl_link.png") 5px center no-repeat;
background-size:10px auto;
}


/* back to top */
footer #go-top {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 900;
	display: none;
	width:100%;	
	text-align:center;
}


footer #go-top .totop a {
	position:absolute;
	bottom:0;
	right:0;
	width:80px;
	display: block;
	padding: 12px 0;
	letter-spacing: 2px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}

footer #go-top .totop a:hover{
opacity:0.5;
}


@media only screen and (max-width:480px)  {

footer #go-top .totop a {
	display:none;
}

}

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

.nextsty{
font-size:1.6em;
}

.nextsty span{
padding-left:30px;
background-size:15px auto;
}

}