@charset "UTF-8";

/* ------------------------------------------- CSS Information 
 Style Info:     ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y: scroll;} 
body,div,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin: 0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
table{border-collapse: collapse;border-spacing: 0;}
caption, th{text-align: left;}   
img,abbr,acronym,fieldset{border: none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display: none;}
object,embed{vertical-align: top;} 

/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
/*A Style*/  
a:link{text-decoration:underline;color:#ffec47;}
a:visited{text-decoration:none;color:#ffec47;}
a:hover{text-decoration:underline;color:#ffec47;}
a:active{text-decoration:none;color:#ffec47;}
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background-color:#fff45c;}
.red{color:#ed6d46;}
.big{font-size:20px;line-height:30px;}
@media only screen and (max-width:768px){.big{font-size:16px;line-height:24px;}}
.pc{width:100%;max-width:1080px;display:block;margin:0 auto;}
.sp{width:100%;max-width:750px;display:none;margin:0 auto;}
.common{width:100%;max-width:750px;display:block;margin:0 auto;}
.br_sp{display:none;}
@media only screen and (max-width:768px){
.pc{display:none;}
.sp{display:block;}
.br_sp{display:block;}
}


/* ------------------------------------------- CSS Information 
 Style Info:     セールスレター型ホームページ詳細設定
----------------------------------------------------------- */
html,body{  
font-family:"メイリオ",Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
color:#333333;
font-size:16px;
line-height:0;
text-align:center;
letter-spacing:0em;
background:#ffffff;
width:100%;
height:100%;
}


/*header----------*/
header{
margin:0;
padding:0;
width:100%;
text-align:center;
background:url(../img/header_bg.png) no-repeat center top;
position:relative;
}
.header01{
position:absolute;
top:0;
left:0;
width:100%;
max-width:960px;
z-index:10;
}
.header02{
position:absolute;
top:0;
left:0;
right:0;
width:100%;
max-width:1080px;
z-index:20;
}
@media only screen and (max-width:768px){
header{background:#ffffff;}
.header01{position:relative;}
.header02{position:relative;}
}

/*----- wrapper -----*/
.wrapper{
width:100%;
max-width:1080px;
margin:0 auto;
padding:0;
position:relative;
}

/*movie----------*/
#movie{
margin:0;
padding:0 0 60px 0;
width:100%;
box-sizing:border-box;
background:#f3f3f3 url(../img/movie_bg.png) no-repeat center;
background-size:cover;
position:relative;
}
.title_movie{max-width:960px;}
.movie_wrapper{
margin:0 auto;
padding:0 30px;
width:100%;
max-width:960px;
position:relative;
box-sizing:border-box;
}
.movie_box{
position:relative;
width:100%;
max-width:900px;
max-height:506px;
margin:0 auto; 
padding-top:56.25%;
}
.movie_box iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
max-width:900px;
max-height:506px;
box-sizing:border-box;
border:5px solid #999999;
}
@media only screen and (max-width:768px){
#movie{padding:0 0 20px 0;}
.title_movie{}
.movie_wrapper{max-width:750px;padding:0 20px;}
.movie_box{}
.movie_box iframe{}
}

/*prologue-----*/
#prologue{
display:block;
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:url(../img/prologue_bg_pc_top.png) no-repeat center top,url(../img/prologue_bg_pc.png) repeat-y center top;
background-size:100% auto,100% auto;
position:relative;
}

/* ------------------------------------------- CSS Information 
 Style Info:     アニメーション
----------------------------------------------------------- */
.sa{opacity:0;transition:all 1s ease;}
.sa.show{opacity:1;transform:none;}
.sa-lr{transform:translate(-100px, 0);}
.sa-rl{transform:translate(100px, 0);}
.sa-up{transform: translate(0, 100px);}
.sa-down{transform: translate(0, -100px);}

.prologue01{
opacity:0;
-webkit-animation:prologue_img 1s ease 0s 1 forwards;
animation:prologue_img 1s ease 0s 1 forwards;
}
.prologue02{
position:absolute;
top:0;
left:0;
right:0;
opacity:0;
-webkit-animation:prologue_img 1s ease 1s 1 forwards;
animation:prologue_img 1s ease 1s 1 forwards;
}
.prologue03{
position:absolute;
top:0;
left:0;
right:0;
opacity:0;
-webkit-animation:prologue_img 1s ease 2s 1 forwards;
animation:prologue_img 1s ease 2s 1 forwards;
}
.prologue04{
position:absolute;
top:0;
left:0;
right:0;
opacity:0;
-webkit-animation:prologue_img 1s ease 3s 1 forwards;
animation:prologue_img 1s ease 3s 1 forwards;
}
@-webkit-keyframes prologue_img{100%{opacity:1;}}
@keyframes prologue_img{100%{opacity:1;}}
@media only screen and (max-width:750px){
#prologue{}
.prologue01{
opacity:0;
-webkit-animation:prologue_img 1s ease 0s 1 forwards;
animation:prologue_img 1s ease 0s 1 forwards;
}
.prologue02{
position:absolute;
top:0;
left:0;
right:0;
opacity:0;
-webkit-animation:prologue_img 1s ease 1s 1 forwards;
animation:prologue_img 1s ease 1s 1 forwards;
}
.prologue03{
position:absolute;
top:0;
left:0;
right:0;
opacity:0;
-webkit-animation:prologue_img 1s ease 2s 1 forwards;
animation:prologue_img 1s ease 2s 1 forwards;
}
.prologue04{}
}

/*story-----*/
#story{
display:block;
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:#f3f3f3;
position:relative;
}
.title_story{
margin:0 auto;
padding:0;
max-width:960px;
}
.story_wrapper{
margin:0 auto;
padding:0;
width:100%;
max-width:1080px;
position:relative;
box-sizing:border-box;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:stretch;
-ms-flex-align:stretch;
align-items:stretch;
}
.story_box{
width:50%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
}
.story_text{
margin:0;
padding:0 30px;
box-sizing:border-box;
}
.story_text dt{
margin:0;
padding:0 0 10px 0;
width:100%;
font-size:20px;
line-height:30px;
font-weight:bold;
text-align:left;
color:#333333;
border-bottom:1px dotted #999999;
}
.story_text dd{
margin:0;
padding:30px 0 40px 0;
font-size:16px;
line-height:24px;
text-align:justify;
vertical-align:middle;
color:#333333;
}
.story_text dd p{
margin:0;
padding:0 0 20px 0;
}
.story_text dd ul{
margin:0;
padding:0 0 20px 0;
}
.story_text dd li{
list-style:none;
margin:0;
padding:0 0 0 20px;
background:url(../img/list_pc.png) no-repeat left top;
}

.story_img{
width:50%;
margin:0;
padding:0;
}
.story_img img{width:100%;max-width:540px;margin:0 auto 0 0;}

@media only screen and (max-width:640px){
#story{}
.title_story{}
.story_wrapper{
margin:0 auto;
padding:0;
width:100%;
max-width:1080px;
display:block;
}
.story_box{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
}
.story_img{display:none;}
.story_img img{}
.story_text{
padding:20px 20px;
display:block;
width:100%;
}
.story_text dt{
padding:0 0 10px 0;
font-size:18px;
line-height:20px;
text-align:center;
}
.story_text dd{
margin:0;
padding:20px 0 0 0;
font-size:14px;
line-height:20px;
vertical-align:top;
}
.story_text dd p{
margin:0;
padding:0 0 20px 0;
}
.story_text dd ul{
margin:0;
padding:0 0 20px 0;
}
.story_text dd li{
list-style:none;
margin:0;
padding:0 0 0 20px;
background:url(../img/list_sp.png) no-repeat left top;
}
.story_text dd br{
display:none;
}
}

/*profile-----*/
#profile{
width:100%;
margin:0;
padding:0 0 30px 0;
box-sizing:border-box;
background:#f5f5f5;
position:relative;
}
.title_profile{max-width:960px;}
.profile_wrapper{
margin:0 auto;
padding:0;
width:100%;
max-width:960px;
position:relative;
box-sizing:border-box;
}
.profile01{
display:block;
width:40%;
margin:0 auto;
padding:0;
}
.profile_name{
margin:0 0 30px 0;
padding:0 0 30px 0;
border-bottom:1px solid #c0d2d6;
}
.profile_box{
display:block;
width:100%;
margin:0;
padding:30px 3.125%;
position:relative;
box-sizing:border-box;
}
.profile_text{
margin:0;
padding:30px 0 0 0;
font-size:16px;
line-height:24px;
text-align:justify;
color:#333333;
box-sizing:border-box;
}
.profile_text p{
margin:0;
padding:0 0 30px 0;
}
.profile_text dt{
padding:10px;
margin:0;
font-size:14px;
line-height:20px;
text-align:left;
font-weight:bold;
background:#c0d2d6;
}
.profile_text dd{
margin:0;
padding:10px 0 30px 0;
font-size:14px;
line-height:20px;
text-align:left;
}
.profile_text dd li{list-style:none;}
.flexbox{
width:100%;
margin:0 auto;
padding:0 3.125% 0 0;
box-sizing:border-box;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
height:100%;
align-items:center;
box-sizing:border-box;
border:4px dotted #a4c1d7;
}
.profile02{
display:block;
width:40%;
margin:0 auto;
padding:0;
}
.profile02 img{width:100%;}
.flexbox .profile_text{width:60%;}

@media only screen and (max-width:640px){
#profile{padding:0;}
.title_profile{}
.profile_wrapper{}
.profile01{width:40%;}
.profile_name{
margin:0 0 20px 0;
padding:0 0 20px 0;
}
.profile_box{padding:10px 3.125% 20px 3.125%;}
.profile_text{
padding:20px 3.125% 0 3.125%;
font-size:14px;
line-height:20px;
}
.profile_text p{
margin:0;
padding:0 0 20px 0;
}
.profile_text dt{
padding:5px;
margin:0;
font-size:14px;
line-height:20px;
text-align:center;
}
.profile_text dd{
padding:10px 0 20px 0;
font-size:12px;
}
.profile_text br{display:none;}
.flexbox{
padding:20px 10px;
display:block;
height:auto;
}
.profile02{
display:block;
width:40%;
margin:0 auto 10px auto;
}
.profile02 img{width:100%;}
.flexbox .profile_text{width:100%;}
}

/*message-----*/
#message{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:#ffffff;
position:relative;
}
.title{max-width:960px;}
.message_wrapper{
margin:0 auto;
padding:0 0 60px 0;
width:100%;
position:relative;
box-sizing:border-box;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.textbox{
width:50%;
min-width:480px;
margin:0;
padding:30px 30px 0 30px;
font-size:18px;
line-height:30px;
color:#333333;
text-align:left;
box-sizing:border-box;
}
.textbox p,.textbox ul{margin:0;padding:0 0 30px 0;}
.textbox li{
list-style:none;
font-size:18px;
line-height:30px;
}
.message_imgbox{
width:50%;
margin:0;
padding:0;
text-align:center;
}
.message_imgbox img{width:100%;max-width:640px;}
.message_img{
display:block;
width:33.4%;
max-width:320px;
margin:0 auto;
}
@media only screen and (max-width:768px){
#message{
width:100%;
max-width:750px;
margin:0 auto;
padding:20px 0 0 0;
box-sizing:border-box;
background:#ffffff;
position:relative;
}
.title{}
.message_wrapper{
margin:0 auto;
padding:0 0 20px 0;
width:100%;
position:relative;
box-sizing:border-box;
display:block;
}
.textbox{
width:100%;
min-width:280px;
margin:0;
padding:20px 20px 0 20px;
font-size:14px;
line-height:20px;
color:#333333;
text-align:left;
box-sizing:border-box;
}
.textbox p,.textbox ul{margin:0;padding:0 0 20px 0;}
.textbox li{
list-style:none;
font-weight:bold;
font-size:16px;
line-height:24px;
}
.message_imgbox{
width:50%;
margin:0 auto;
padding:0;
text-align:center;
}
.message_imgbox img{width:100%;max-width:640px;}
}


/*----- service -----*/
#service{
width:100%;
max-width:1280px;
margin:0 auto;
padding:60px 30px;
box-sizing:border-box;
}
.title_service{
font-size:16px;
line-height:24px;
border-left:5px solid #a4c1d7;
text-align:left;
color:#333333;
font-weight:bold;
margin:0;
padding:0 0 0 5px;
}
.service_pc{
display:table;
width:100%;
margin:20px auto 0 auto;
box-sizing:border-box;
text-align:center;
color:#666666;
}
.service_pc th{
background:#a4c1d7;
font-size:14px;
line-height:20px;
color:#ffffff;
text-align:center;
padding:10px;
border:1px solid #999999;
}
.service_pc td{
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
background:#ffffff;
}
.service_pc td.free_box{
box-sizing:border-box;
color:#ffffff;
font-weight:bold;
background:#ed6d46;
border:6px solid #ed6d46;
}
.free{
box-sizing:border-box;
border:6px solid #ed6d46;
}
.service_sp{display:none;}
@media only screen and (max-width:768px){
#service{
max-width:750px;
margin:0 auto;
padding:40px 20px;
box-sizing:border-box;
}
.title_service{
font-size:14px;
line-height:20px;
}
.service_pc{display:none;}
.service_sp{
display:block;
margin:20px 0 0 0;
color:#666666;
}
.service_sp dt{
background:#a4c1d7;
color:#ffffff;
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
}
.service_sp dt.free_box{
box-sizing:border-box;
color:#ffffff;
font-weight:bold;
background:#ed6d46;
}
.service_sp dd{
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
background:#ffffff;
}
}

/*cta----------*/
.cta{
margin:0;
padding:0 0 30px 0;
box-sizing:border-box;
text-align:center;
background:#f5f5f5 url(../img/cta_bg.png) no-repeat center fixed;
background-size:cover;
position:relative;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}
.cta_wrapper{
width:100%;
max-width:960px;
margin:0 auto;
padding:0;
box-sizing:border-box;
position:relative;
display:block;
}
.title_cta{max-width:960px;}
.cta_box{
width:100%;
max-width:730px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.cta_box form{
width:100%;
padding:0 30px 30px 30px;
box-sizing:border-box;
}
.cta_box form input[type=text]{
font-family: "ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
font-size:20px;
line-height:30px;
width:100%;
margin:0 0 10px 0;
padding:10px;
text-align:left;
border:1px solid #333333;
box-sizing:border-box;
}
.cta_box form input[type=image]{
width:100%;
max-width:580px;
margin:0 auto;
}
.cta_text{
width:100%;
margin:0 auto;
padding:0 30px;
font-size:12px;
line-height:20px;
text-align:justify;
color:#333333;
box-sizing:border-box;
}
.cta_text p{
margin:0;
padding:0;
}
@media only screen and (max-width:750px){
.cta{
margin:0;
padding:0 0 20px 0;
box-sizing:border-box;
text-align:center;
background:#f5f5f5 url(../img/cta_bg.png) no-repeat center;
background-size:cover;
position:relative;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}
.cta_wrapper{display:block;padding:0;}
.cta_img{display:block;width:100%;margin:0;padding:0;}
.cta_box{
display:block;
width:100%;
max-width:750px;
margin:0 auto;
}
.cta_box form{
width:100%;
padding:0 20px;
box-sizing:border-box;
}
.cta_box form input[type=text]{
font-family: "ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
font-size:16px;
line-height:30px;
width:100%;
margin:0 0 10px 0;
padding:10px;
text-align:left;
border:1px solid #333333;
box-sizing:border-box;
}
.cta_box form input[type=image]{
width:100%;
max-width:580px;
margin:0 auto;
}
.cta_text{
padding:20px 20px 0 20px;
font-size:12px;
line-height:20px;
}
.cta_text p{}
}

/*footer----------*/
footer{
margin:0;
padding:30px;
width:100%;
font-size:12px;
color:#eeeeee;
background:#3d4042;
box-sizing:border-box;
}
nav{
margin:0 0 20px auto;
padding:0 0 20px 0;
border-bottom:1px solid #45484a;
}
nav ul{
text-align:left;
font-size:12px;
line-height:20px;
padding:0;
}
nav li{
display:-moz-inline-box;
display:inline-block;
/display:inline;
/zoom:1;
list-style-type:none;
padding:0 20px 0 8px;
background:url(../img/footer.png) no-repeat left center;
}
nav a:link{color:#eeeeee;text-decoration:none;}
nav a:visited{color:#dddddd;text-decoration:none;}
nav a:hover{color:#dddddd;text-decoration:underline;}
nav a:active{color:#dddddd;text-decoration:none;}
.attention{
margin:0;
padding:0 0 30px 0;
text-align:justify;
font-size:12px;
line-height:20px;
}
.attention p{margin:0;padding:0;}
address{
text-align:right;
font-size:12px;
line-height:20px;
padding:0;
}
@media only screen and (max-width:768px){
footer{padding:30px 10px;}
nav ul{line-height:30px;}
nav li{display:block;/display:block;}
.attention br,.sp_no{display:none;}
}