@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:#e50012;}
.big{font-size:20px;line-height:30px;}
@media only screen and (max-width:640px){.big{font-size:16px;line-height:24px;}}
.pc{width:100%;max-width:1080px;display:block;margin:0 auto;}
.sp{width:100%;max-width:640px;display:none;margin:0 auto;}
.common{width:100%;max-width:640px;display:block;margin:0 auto;}
.br_sp{display:none;}
@media only screen and (max-width:640px){
.pc{display:none;}
.sp{display:block;}
.br_sp{display:block;}
}


/* ------------------------------------------- CSS Information 
 Style Info:     セールスレター型ホームページ詳細設定
----------------------------------------------------------- */
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;
overflow:hidden;
background:#ffffff;
}


/*header----------*/
header{
margin:0;
padding:0;
width:100%;
background:#000000 url(../img/header_bg.png) repeat-x center top;
background-size:auto 100%;
text-align:center;
position:relative;
}
.header_wrapper{
width:100%;
max-width:960px;
margin:0 auto;
position:relative;
}
.header_balloon{
display:inline-block;
width:28.125%;
position:absolute;
left:0;
top:0;
-webkit-animation:balloon 0.8s linear infinite;
animation:balloon 0.8s linear infinite;
z-index:2;
}
@-webkit-keyframes balloon{
0%{top:0;}
50%{top:2%;}
100%{top:0;}
}
@keyframes balloon{
0%{top:0;}
50%{top:2%;}
100%{top:0;}
}

.header_main{z-index:3;position:relative;}

.header_img{
display:inline-block;
width:320px;
position:absolute;
left:6.25%;
bottom:0;
opacity:1;
-webkit-animation:walk 100s ease 0s 1 forwards;
animation:walk 100s ease 0s 1 forwards;
z-index:1;
}
@-webkit-keyframes walk{
50%{opacity:1;}
100%{
width:120px;
left:25%;
bottom:80%;
opacity:0;
}
}
@keyframes walk{
50%{opacity:1;}
100%{
width:120px;
left:25%;
bottom:80%;
opacity:0;
}
}

@media only screen and (max-width:960px){
.header_img{width:25%;}
@-webkit-keyframes walk{
50%{opacity:1;}
100%{
width:12.5%;
left:25%;
bottom:90%;
opacity:0;
}
}
@keyframes walk{
50%{opacity:1;}
100%{
width:12.5%;
left:25%;
bottom:90%;
opacity:0;
}
}
}

@media only screen and (max-width:640px){
.header_img{
display:block;
margin:0 auto;
width:25%;
position:absolute;
left:0;
right:0;
bottom:10%;
opacity:1;
-webkit-animation:walk 60s ease 0s 1 forwards;
animation:walk 60s ease 0s 1 forwards;
}
@-webkit-keyframes walk{
50%{opacity:1;}
100%{
width:12.5%;
left:0;
right:0;
bottom:90%;
opacity:0;
}
}
@keyframes walk{
50%{opacity:1;}
100%{
width:12.5%;
left:0;
right:0;
bottom:90%;
opacity:0;
}
}

.header_balloon{
width:42%;
position:absolute;
left:-10px;
top:0;
-webkit-animation:balloon 0.8s linear infinite;
animation:balloon 0.8s linear infinite;
z-index:3;
}
}



/*----- wrapper -----*/
.wrapper{
width:100%;
max-width:1080px;
margin:0 auto;
padding:0;
position:relative;
}
.hr{
display:block;
margin:0;
padding:0;
width:100%;
height:60px;
}
@media only screen and (max-width:640px){.hr{height:40px;}}

/*movie----------*/
#movie{
margin:0;
padding:0;
width:100%;
box-sizing:border-box;
background-color:#000000;
background-image:url(../img/movie_bg_left.png),url(../img/movie_bg_right.png);
background-repeat:no-repeat,no-repeat;
background-position:left top,right top;
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 #ffffff;
}
@media only screen and (max-width:960px){
#movie{
background-color:#000000;
background-image:url(../img/movie_bg_pc.png);
background-repeat:no-repeat;
background-position:center top;
background-size:100% auto;
}
.title_movie{}
.movie_wrapper{padding:0 3.125%;}
.movie_box{}
.movie_box iframe{}
}
@media only screen and (max-width:640px){
#movie{
background-color:#000000;
background-image:url(../img/movie_bg_sp.png);
background-repeat:no-repeat;
background-position:center top;
background-size:100% auto;
}
.title_movie{}
.movie_wrapper{}
.movie_box{}
.movie_box iframe{}
}

/*prologue-----*/
#prologue{
display:block;
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:#000000 url(../img/prologue_bg_pc.png) no-repeat center top;
background-size:auto 100%;
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:640px){
#prologue{
background:#000000 url(../img/prologue_bg_sp.png) no-repeat center top;
background-size:auto 100%;
}
.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:#222222;
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;
}
.story_box{
display:block;
width:100%;
margin:0 auto;
padding:0;
position:relative;
box-sizing:border-box;
}
.story_img{
display:table-cell;
vertical-align:top;
width:50%;
padding:0;
box-sizing:border-box;
}
.story_img img{width:100%;max-width:540px;}
.story_text{
display:table-cell;
margin:0 0 ;
padding:0 3.125%;
width:50%;
max-width:540px;
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:#ffffff;
border-bottom:1px dotted #ffffff;
}
.story_text dd{
margin:0;
padding:30px 0 40px 0;
font-size:16px;
line-height:24px;
text-align:justify;
vertical-align:middle;
color:#ffffff;
}
.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;
}
@media only screen and (max-width:640px){
#story{}
.story_wrapper{}
.title_story{}
.story_box{}
.story_img{display:none;}
.story_img img{}
.story_text{
padding:20px 3.125%;
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;
box-sizing:border-box;
background:#000000 url(../img/profile_bg.png) no-repeat center top;
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 #c9171e;
}
.profile_box{
display:block;
width:100%;
margin:0;
padding:30px 3.125%;
position:relative;
box-sizing:border-box;
}
.profile_text{
margin:0;
padding:30px 3.125% 0 3.125%;
font-size:16px;
line-height:24px;
text-align:justify;
color:#ffffff;
background:rgba(255,255,255,0.1);
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:#c9171e;
}
.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% 60px 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;
}
.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:960px){
#profile{
background:#000000 url(../img/profile_bg_pc.png) no-repeat center top;
background-size:100% auto;
}
}
@media only screen and (max-width:640px){
#profile{background:#000000 url(../img/profile_bg_sp.png) no-repeat center top;}
.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:0 3.125% 20px 3.125%;
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:#222222 url(../img/message_bg.png) no-repeat center fixed;
background-size:cover;
position:relative;
}
.title{max-width:960px;}
.message_wrapper{
margin:0 auto;
padding:0 0 60px 0;
width:100%;
max-width:960px;
position:relative;
box-sizing:border-box;
}
.textbox{
margin:0;
padding:0 3.125% 0 3.125%;
font-size:16px;
line-height:24px;
color:#ffffff;
}
.textbox p,.textbox ul{margin:0;padding:0 0 30px 0;}
.textbox li{
list-style:none;
font-weight:bold;
font-size:20px;
line-height:30px;
}
.message_img{
display:block;
width:33.4%;
max-width:320px;
margin:0 auto;
}
@media only screen and (max-width:640px){
#message{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:#222222 url(../img/message_bg.png) no-repeat center fixed;
background-size:cover;
position:relative;
}
.title{}
.message_wrapper{padding:0 0 20px 0;}
.textbox{
font-size:14px;
line-height:20px;
}
.textbox p,.textbox ul{margin:0;padding:0 0 20px 0;}
.textbox li{
font-size:16px;
line-height:24px;
}
}

/*----- service -----*/
.title_service{
font-size:16px;
line-height:24px;
border-left:5px solid #c9171e;
text-align:left;
color:#ffffff;
font-weight:bold;
margin:30px 0 0 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:#c9171e;
color:#ffffff;
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
}
.service_pc td{
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
background:#ffffff;
}
.free{
box-sizing:border-box;
border:3px solid #e50012;
}
.service_sp{display:none;}
@media only screen and (max-width:768px){
.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:#c9171e;
color:#ffffff;
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
}
.service_sp dd{
font-size:14px;
line-height:20px;
text-align:center;
padding:10px;
background:#ffffff;
}
}

/*cta----------*/
.cta{
margin:0;
padding:0 0 120px 0;
box-sizing:border-box;
text-align:center;
background:#c9171e url(../img/cta_bg.png) repeat-x center bottom;
position:relative;
}
.title_cta{max-width:960px;}
.cta_box{
width:100%;
max-width:640px;
margin:0 auto;
padding:0;
}
.cta_box form{
width:100%;
padding:0 3.125% 30px 3.125%;
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:20px;
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:600px;
margin:0 auto;
}
.cta_text{
width:100%;
max-width:1080px;
margin:0 auto;
padding:0 3.125% 40px 3.125%;
font-size:12px;
line-height:20px;
text-align:justify;
color:#eeeeee;
box-sizing:border-box;
}
.cta_text p{
margin:0;
padding:0;
}
@media only screen and (max-width:640px){}

/*footer----------*/
footer{
margin:0;
padding:30px;
width:100%;
font-size:12px;
color:#f5f5f5;
background:#000000;
box-sizing:border-box;
}
nav{
margin:0 0 0 auto;
padding:0 0 30px 0;
}
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:#ffffff;text-decoration:none;}
nav a:visited{color:#eeeeee;text-decoration:none;}
nav a:hover{color:#eeeeee;text-decoration:underline;}
nav a:active{color:#eeeeee;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;}
}