@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Noto+Serif+JP:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&display=swap');

/* ------------------------------------------- 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;}
li{list-style:none;}

/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
/*A Style*/  
a:link{text-decoration:underline;color:#666666;}
a:visited{text-decoration:none;color:#666666;}
a:hover{text-decoration:underline;color:#999999;}
a:active{text-decoration:none;color:#666666;}
/*font*/
strong{font-weight:600;color:#097c25;}
.b{font-weight:600;}
.ul{text-decoration:underline;}
.bg{background-color:#fff45c;}
.big{font-size:24px;line-height:40px;}
.small{font-size:14px;line-height:20px;}
.red{color:#b7282e;}
.text_center{text-align:center;}
.text_right{text-align:right;}


/* ----------------------- CSS Information 
 Style Info: BODY
--------------------------------------- */
body{  
font-family:'Noto Sans JP',"メイリオ","ヒラギノ角ゴ Pro W3",Sans-Serif;
color:#333333;
font-size:17px;
line-height:0;
text-align:center;
background:#f6f6f5;
letter-spacing:0em;
overflow:hidden;
}

/* ----------------------- CSS Information 
 Style Info: HEADER
--------------------------------------- */
header{position:relative;width:100%;margin:0;padding:0;text-align:center;}
.header01{background:#ffffff;}
.header02{background:#000000 url(../img/header02_bg.png) no-repeat center;background-size:cover;}
.header03{background:#ffe000;}

/* ----------------------- CSS Information 
 Style Info: TITLE
--------------------------------------- */
.title{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:0;
text-align:center;
box-sizing:border-box;
background:#268300 url(../img/title_bg_pc.png) no-repeat center;background-size:cover;
}
.title img{width:1000px;margin:0 auto;}
.sub{
position:relative;
display:block;
width:100%;
margin:80px auto 40px auto;
padding:10px;
font-size:20px;
line-height:40px;
font-weight:700;
text-align:left;
color:#ffffff;
box-sizing:border-box;
background:#0a6921;
border-left:5px solid #faf062;
box-sizing:border-box;
}

/* ----------------------- CSS Information 
 Style Info: CONTENTS
--------------------------------------- */
.contents{
width:100%;
margin:0;
padding:0 0 120px 0;
position:relative;
background:#ffffff;
}
.contents_box{
width:1000px;
margin:0 auto;
padding:60px 0 0 0;
box-sizing:border-box;
background:#ffffff;
}

/* ----------------------- CSS Information 
 Style Info: TEXT
--------------------------------------- */
.text{
width:1000px;
margin:0 auto;
padding:0 40px 0 40px;
font-size:17px;
line-height:35px;
text-align:left;
box-sizing:border-box;
}
/* p ----- */
.text p{margin:0 0 40px 0;padding:0;}
.text p:last-child{margin:0;}

/* ul ----- */
.text ul{margin:0 0 40px 0;}
.text ul li{margin:0;padding:0;}
.text ul.check{padding:30px;background:#eaf3e8;}
.text ul.check li{
position:relative;
list-style:none;
font-weight:bold;
font-size:18px;
line-height:30px;
padding:10px 0 10px 30px;
border-bottom:1px dashed #cccccc;
}
.text ul.check li:last-child{border-bottom:none;}
.text ul.check li:before{
content:"";
display:block;
position:absolute;
top:16px;
left:0;
width:20px;
height:20px;
background:#0a6921;
box-sizing:border-box;
}
.text ul.check li:after{
content:"";
display:block;
position:absolute;
top:16px;
left:5px;
width:6px;
height:12px;
transform:rotate(40deg);
border-bottom:3px solid #f6f6f5;
border-right:3px solid #f6f6f5;
}

/* inner_box ----- */
dl.inner_box{
margin:0 0 40px 0;
padding:0;

}
dl.inner_box dt{
margin:0;
padding:10px 20px;
line-height:20px;
color:#ffffff;
background:#0a6921;
}
dl.inner_box dd{
margin:0;
padding:30px;
border-left:1px solid #0a6921;
border-right:1px solid #0a6921;
border-bottom:1px solid #0a6921;
}
dl.inner_box dd .item{
display:inline-block;
width:200px;
margin:0 10px 0 0;
padding:0 0 1px 0;
font-size:16px;
line-height:23px;
text-align:center;
vertical-align:-2px;
color:#ffffff;
background:#429b46;
}
dl.inner_box dd .img_box.process_img{margin:30px auto 0 auto;}
span.item2{
display:inline-block;
width:200px;
margin:0 10px 0 0;
padding:0 0 1px 0;
font-size:16px;
line-height:23px;
text-align:center;
vertical-align:-2px;
color:#ffffff;
background:#429b46;
}

/* img_box ----- */
.img_box{
margin:0 0 40px 0;
padding:40px;
background:#eaf3e8;
}
#present .img_box{background:#fdfbef;}
.img_box img{
display:block;
margin:0 auto;
}

/* result ----- */
.result{
margin:0 0 40px 0;
padding:40px;
background:#eaf3e8;
}
.result_table{
width:600px;
margin:0 auto;
border-collapse:separate;
border-spacing:1px;
box-sizing:border-box;
}
#faq .result_table{margin:20px auto 20px auto;}
.result_table th{
width:20%;
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
font-weight:normal;
color:#f6f6f5;
background:#0a6921;
}
.result_table td{
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
}
.result_table tr:nth-child(odd){background:#eeeeee;}
.result_table tr:nth-child(even){background:#f6f6f5;}
.result_table tr:last-child{background:#b60b0f;color:#f6f6f5;}

/* experience ----- */
.experience{
margin:0 0 40px 0;
padding:40px;
background:#eaf3e8;
}
.experience_table{
width:600px;
margin:0 auto;
border-collapse:separate;
border-spacing:1px;
box-sizing:border-box;
}
.experience_table th{
width:25%;
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
font-weight:normal;
color:#f6f6f5;
background:#0a6921;
}
.experience_table td{
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
}
.experience_table tr:nth-child(odd){background:#eeeeee;}
.experience_table tr:nth-child(even){background:#f6f6f5;}
.experience_attention{
font-size:14px;
line-height:20px;
color:#999999;
text-align:right;
}

/* comparison ----- */
.comparison{
margin:0 0 40px 0;
padding:40px;
background:#eaf3e8;
}
.comparison_table{
width:600px;
margin:0 auto;
border-collapse:separate;
border-spacing:1px;
box-sizing:border-box;
}
.comparison_table th{
width:33.3%;
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
font-weight:normal;
color:#f6f6f5;
background:#0a6921;
}
.comparison_table td{
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
}
.comparison_table tr:nth-child(odd){background:#eeeeee;}
.comparison_table tr:nth-child(even){background:#f6f6f5;}
.comparison_table tr:nth-child(1){background:#eeeeee;}
.comparison_table tr:nth-child(2) th{background:#429b46;}
.comparison_table tr:nth-child(3) th{background:#429b46;}
.comparison_table tr:nth-child(4) th{background:#429b46;}
.comparison_table tr td:nth-child(3){color:#b60b0f;font-weight:600;}



/* video ----- */
.video{
margin:0 0 40px 0;
padding:40px;
background:#eaf3e8;
}
/* -- photo -- */
.photo{
display:block;
width:300px;
float:right;
margin:0 0 20px 30px;
padding:0;
}


/* ----------------------- CSS Information 
 Style Info: PRESENT
--------------------------------------- */
#present{background:#fdefef;}
.present_wrapper{
width:1000px;
margin:60px auto 0 auto;
padding:0 40px;
box-sizing:border-box;
}
.present_box{
margin:0 auto 40px auto;
padding:0;
background:#ffffff;
box-sizing:border-box;
}
.present_box .text{
width:920px;
margin:0;
padding:60px 40px 40px 40px;
box-sizing:border-box;
text-align:left;
overflow-y:auto;
}
.present_img{
display:block;
float:right;
width:300px;
margin:0 0 20px 30px;
padding:0;
box-sizing:border-box;
}

/* ----------------------- CSS Information 
 Style Info: RANKING
--------------------------------------- */
#ranking{
width:1000px;
margin:0 auto;
padding:0 40px 60px 40px;
box-sizing:border-box;
}
.ranking_flex{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:100%;
margin:0 auto 30px auto;
padding:0;
box-sizing:border-box;
}
.ranking_flex:last-child{margin:0 auto;}
.ranking_flex dl{
width:48%;
width:-webkit-calc(50% - 15px);
width:calc(50% - 15px);
padding:0;
background:#ffffff;
box-sizing:border-box;
}
.ranking_flex dl:first-child{margin:0 15px 0 0;}
.ranking_flex dl:last-child{margin:0 0 0 15px;}
.ranking_flex dt{
font-size:16px;
line-height:20px;
padding:10px 5px;
color:#ffffff;
background:#0a6921;
}
.ranking_flex dd{
padding:20px;
border-bottom:1px solid #0a6921;
border-left:1px solid #0a6921;
border-right:1px solid #0a6921;
}
.ranking_flex dd img{width:100%;}
#ranking .text_right{margin:0;padding:0;font-size:14px;line-height:20px;}

/* ----------------------- CSS Information 
 Style Info: DATE
--------------------------------------- */
#date{background:#eff1e4;}
.date_wrapper{
width:1000px;
margin:0 auto;
padding:0 40px 0 40px;
box-sizing:border-box;
}
.date_wrapper img{
display:block;
width:920px;
margin:0 auto 40px auto;
padding:0;
}

/* ----------------------- CSS Information 
 Style Info: STEP
--------------------------------------- */
.step_img{
display:block;
width:920px;
margin:0 auto 40px auto;
padding:0;
}

/* ----------------------- CSS Information 
 Style Info: VOICE
--------------------------------------- */
#voice{padding:0 0 120px 0;background:#ffffff;}
.voice_wrapper{
width:1000px;
margin:0 auto 0 auto;
padding:0 40px 0 40px;
box-sizing:border-box;
}
.voice_attention{
margin:0;
padding:0;
font-size:14px;
line-height:20px;
text-align:right;
color:#999999;
}
.voice_box{
margin:0 auto;
padding:40px;
width:920px;
height:800px;
overflow-y:scroll;
background:#eaf3e8;
border:1px solid #000000;
box-sizing:border-box;
}
.comment_box{
display:block;
width:100%;
margin:0 0 30px 0;
padding:0 0 30px 0;
font-size:16px;
line-height:30px;
text-align:justify;
background:#ffffff;
box-sizing:border-box;
}
.comment_wrapper .comment_box:last-child{margin:0;}
.comment_info{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
display:-webkit-box;
display:flex;
-webkit-box-align:stretch;
align-items:stretch;
background:#0a6921;
}
.comment_img{
display:block;
width:60px;
height:60px;
margin:0;
padding:10px 0 10px 10px;
}
.comment_img img{display:block;width:100%;}
.comment_header{
flex:1;
padding:0 10px 0 0;
font-weight:600;
color:#ffffff;
}
.comment_header p{
margin:0;
padding:10px 0 0 10px;
font-size:18px;
line-height:38px;
text-align:left;
border-bottom:1px solid #ffffff;
}
.comment_name{
display:block;
margin:0;
padding:0 0 0 10px;
font-size:14px;
line-height:24px;
text-align:right;
}
.comment_text{
position:relative;
display:block;
width:100%;
margin:0;
padding:40px;
font-size:16px;
line-height:30px;
text-align:justify;
box-sizing:border-box;
}
.comment_text p{margin:0;padding:0 0 20px 0;}
.comment_text p:last-child{margin:0;padding:0;}
.comment_text img{display:block;margin:0 auto;padding:0 0 30px 0;}
.voice_date{
display:block;
width:600px;
margin:0 auto;
padding:0;
text-align:center;
}
/* -- date_table -- */
.date_table{
width:100%;
margin:0 auto 30px auto;
border-collapse:separate;
border-spacing:1px;
box-sizing:border-box;
}
.date_table th{
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
font-weight:normal;
color:#f6f6f5;
background:#0a6921;
}
.date_table td{
margin:0;
padding:5px 0;
text-align:center;
font-size:16px;
line-height:30px;
}
.date_table tr:nth-child(odd){background:#eeeeee;}
.date_table tr:nth-child(even){background:#f6f6f5;}
.td_red{background:#fad8d8;}
.more{
position:relative;
width:100%;
max-height:160px;
overflow:hidden;
transition:1s;
}
.more:before {/*グラデーション部分*/
content:"";
position:absolute;
width:100%;
height:50%;
bottom:0;
background:linear-gradient(rgba(255,255,255,0.5), #ffffff);
transition: 1s;
}
.comment_textbox input{display:none;}
.comment_textbox label{/*ボタン部分のスタイル*/
display:block;
position:absolute;
width:180px;
height:30px;
margin:0 auto;
padding:5px 0;
bottom:0;
left:0;
right:0;
font-size:14px;
line-height:20px;
text-align:center;
color:#ffffff;
background:#429b46;
border-radius:15px;
cursor:pointer;
text-transform: uppercase;
z-index:999;
box-sizing:border-box;
}
.comment_textbox label:hover{background:#b8d200;}
.comment_textbox label:before{content:"続きを読む";}
.comment_textbox input:checked + label{display:none;}
input[type=checkbox]:checked ~ .more{max-height:100%;}
input[type=checkbox]:checked ~ .more:before{opacity:0;}

/* ----------------------- CSS Information 
 Style Info: USER
--------------------------------------- */
#user{padding:0 0 120px 0;background:#eaf3e8;}
#user .contents_box{background:#eaf3e8;;}
.user_wrapper{
width:1000px;
margin:60px auto 0 auto;
padding:0 40px 0 40px;
box-sizing:border-box;
}
.user_box{
margin:0 auto;
padding:40px;
width:920px;
height:800px;
overflow-y:scroll;
background:#eaf3e8;
border:1px solid #000000;
box-sizing:border-box;
}


/* ----------------------- CSS Information 
 Style Info: FAQ
--------------------------------------- */
#faq{}
#faq dl{
width:1000px;
margin:40px auto 0 auto;
padding:0 40px;
box-sizing:border-box;
}
#faq dt{
font-size:16px;
line-height:30px;
text-align:justify;
margin:0;
padding:20px 20px 20px 70px;
background:#eaf3e8 url(../img/faq_q.png) no-repeat 20px 20px;
background-size:30px 30px;
border-radius:10px 10px 0 0;
border-bottom:1px solid #0a6921;
}
#faq dd{
font-size:16px;
line-height:30px;
text-align:justify;
margin:0 0 30px 0;
padding:20px 20px 20px 70px;
background:#eaf3e8 url(../img/faq_a.png) no-repeat 20px 20px;
background-size:30px 30px;
border-radius:0 0 10px 10px;
}
#faq dd:last-child{margin:0;}
.faq_img{margin:20px auto 0 auto;}


/* ----------------------- CSS Information 
 Style Info: PS
--------------------------------------- */
#ps{}
.name{width:180px;}

/* ----------------------- CSS Information 
 Style Info: CTA
--------------------------------------- */
.cta{
width:100%;
margin:0;
padding:0;
text-align:center;
color:#ffffff;
background:#018159 url(../img/cta_bg.png) no-repeat center top;
background-size:cover;
}
.btn{
width:660px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
.btn_wrapper{
position:relative;
width:600px;
margin:0 auto;
padding:0;
background:#ffffff;
overflow:hidden;
border-radius:10px;
box-shadow:2px 2px 4px 0px rgba(0,0,0,0.5);
box-sizing:border-box;
}
.btn_wrapper img{width:100%;}
.btn_wrapper img:hover{opacity:0.5;}
.cta_attention{
margin:20px auto 0 auto;
padding:0 0 40px 0;
width:100%;
max-width:520px;
box-sizing:border-box;
}
.cta_attention li{
margin:0;
padding:0 0 0 16px;
font-size:14px;
line-height:20px;
text-align:justify;
color:#ffffff;
list-style:none;
background:url(../img/opt_attention_li.png) no-repeat left 2px;
background-size:12px 20px;
}

/* ----------------------- CSS Information 
 Style Info: FOOTER
--------------------------------------- */
footer{
margin:0;
padding:40px 0;
width:100%;
background:#111111;
color:#ffffff;
}
#fnav a{color:#ffffff;text-decoration:none;}
#fnav a:hover{color:#ffffff;text-decoration:underline;}
#fnav{margin:0 0 20px 0;}
#fnav ul{list-style-type:none;}
#fnav li{
font-size:12px;
line-height:20px;
display:inline-block;
padding:0 20px;
border-right:1px solid #cccccc;
}
#fnav li:last-child{border-right:none;}
address{
text-align:center;
font-size:12px;
line-height:20px;
padding:0;
}

/* ----------------------- CSS Information 
 Style Info: FADEIN
--------------------------------------- */
.fadein{
opacity:0;
transition:all ease 1s;
}
.fadein.scrollin{opacity:1;}
/*左から----------*/
.fadein_left{
opacity:0;
transform:translateX(-40px);
transition:all 1s;
}
.fadein_left.scrollin{
opacity:1;
transform:translateX(0);
}
/*右から----------*/
.fadein_right{
opacity:0;
transform:translateX(40px);
transition:all 1s;
}
.fadein_right.scrollin{
opacity:1;
transform:translateX(0);
}
/*上から----------*/
.fadein_top{
opacity:0;
transform:translateY(-20px);
transition:all 1s;
}
.fadein_top.scrollin{
opacity:1;
transform:translateY(0);
}
/*下から----------*/
.fadein_bottom{
opacity:0;
transform:translateY(20px);
transition:all 1s;
}
.fadein_bottom.scrollin{
opacity:1;
transform:translateY(0);
}