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

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
color:#6c6c6c;
}
@media screen and (max-width:800px){
html,body{ font-size: calc((20/800)*100vw);}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.gothic{ font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
.white{ color:#fff;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*メイン*/
#content{ max-width: 800px; margin: auto; overflow:hidden; box-shadow:rgba(0, 0, 0, 0.1) 0 0 20px 10px;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:100%;}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1; letter-spacing: 0;}

/*cta*/
.cta{ margin: 0 auto; position: relative;}
.cta .cta_top{ margin: 0 auto;}
.cta figure.btn{ margin: 0 auto;}
.cta figure.btn img{ width: 696px;}
@media screen and (max-width:800px){
.cta figure.btn img{ width: calc((696/800)*100%);}
}



/*fv*/
#fv{ margin: 0 auto;}

/*lead*/
#lead{ margin: 0 auto;}

/*otsuka*/
#otsuka{ background: #f4f6fb; padding: 1px 0 50px;}
#otsuka h2{ margin-top: -31px;}
#otsuka .cta{ margin-top: 25px;}
#otsuka .cta:before{ content: ""; width: 84px; height: 42px; background: url("../images/arrow.png") center center no-repeat; background-size: 100%; position: absolute; left: 0; right: 0; top: -16px; margin: auto;}
@media screen and (max-width:800px){
#otsuka{ padding: calc((1/800)*100vw) 0 calc((50/800)*100vw);}
#otsuka h2{ margin-top: calc((-31/800)*100vw);}
#otsuka .cta{ margin-top: calc((25/800)*100vw);}
#otsuka .cta:before{ width: calc((84/800)*100vw); height: calc((42/800)*100vw); top:calc((-16/800)*100vw);}
}

/*trouble*/
#trouble{ background: url("../images/trouble_bg.jpg") center top; background-size: cover; padding: 40px 0 1px; position: relative; z-index: 3;}
#trouble h2{ margin-bottom: 50px;}
#trouble figure.list{ margin-bottom: -316px;}
#trouble2{ background: #fff; padding: 325px 0 80px;}
#trouble2 h2{ margin-bottom: 40px;}
#trouble2 p{ margin-bottom: 40px; text-align: center; font-size: 1rem;}
#trouble2 figure.zu{ margin: 0 auto 50px;}
@media screen and (max-width:800px){
#trouble{ padding: calc((40/800)*100vw) 0 calc((1/800)*100vw);}
#trouble h2{ margin-bottom: calc((50/800)*100vw);}
#trouble figure.list{ margin-bottom: calc((-316/800)*100vw);}
#trouble2{ padding: calc((325/800)*100vw) 0 calc((80/800)*100vw);}
#trouble2 h2{ margin-bottom: calc((40/800)*100vw);}
#trouble2 p{ margin-bottom: calc((40/800)*100vw);}
#trouble2 figure.zu{ margin: 0 auto calc((50/800)*100vw);}
}

/*damage*/
#damage{ background: url("../images/damage_bg.jpg") center center; background-size: cover; padding: 1px 0 70px; position: relative; z-index: 3;}
#damage h2{ margin-top: -81px;}
@media screen and (max-width:800px){
#damage{ padding: calc((1/800)*100vw) 0 calc((70/800)*100vw);}
#damage h2{ margin-top: calc((-81/800)*100vw);}
}

/*product*/
#product{ position: relative; z-index: 3;}
#product figure.lead{ position: absolute; left: 0; right: 0; bottom: -130px;}
@media screen and (max-width:800px){
#product figure.lead{ bottom:calc((-130/800)*100vw);}
}

/*point*/
#point{ background: url("../images/point_bg.jpg") center top no-repeat #fff; background-size: 100%; padding: 120px 0 0; position: relative; z-index: 1;}
#point:before{ content: ""; width: 0; height: calc(100% - 120px - 50px); border-left: 2px dotted #4d4d4d; position: absolute; left: 25px; top: 120px; z-index: -1;}
#point:after{ content: ""; width: 0; height: calc(100% - 120px - 50px); border-left: 2px dotted #4d4d4d; position: absolute; right: 25px; top: 120px; z-index: -1;}
#point ul{ margin-top: -130px;}
#point ul li{ margin-top: -20px;}
@media screen and (max-width:800px){
#point{ padding: calc((120/800)*100vw) 0 0;}
#point:before{ height: calc(100% - ((120/800)*100vw) - ((50/800)*100vw)); left: calc((25/800)*100vw); top: calc((120/800)*100vw);}
#point:after{ height: calc(100% - ((120/800)*100vw) - ((50/800)*100vw)); right: calc((25/800)*100vw); top: calc((120/800)*100vw);}
#point ul{ margin-top: calc((-130/800)*100vw);}
#point ul li{ margin-top: calc((-20/800)*100vw);}
}

/*philosophy*/
#philosophy{ margin: 0 auto; padding: 60px 0 40px; background: url("../images/philosophy_bg.jpg") center top; background-size: 100%;}
#philosophy h2{ margin-bottom: 60px;}
#philosophy ul{ width: 744px; margin: 0 auto;}
@media screen and (max-width:800px){
#philosophy{ padding: calc((60/800)*100vw) 0 calc((40/800)*100vw);}
#philosophy h2{ margin-bottom: calc((60/800)*100vw);}
#philosophy ul{ width: calc((744/800)*100%);}
}

/*flavor*/
#flavor{ background: #fff; padding: 70px 30px 25px;}
#flavor h2{ margin-bottom: 30px;}
@media screen and (max-width:800px){
#flavor h2{ margin-bottom: calc((30/800)*100vw);}
#flavor{ padding: calc((70/800)*100vw) calc((30/800)*100vw) calc((25/800)*100vw);}
}

/*last*/
#last{ background: #f3f5fa; padding: 40px 0;}
#last #att{ margin: 25px 40px 0;}
#last #att ul{ font-size: 0.45rem; line-height: 1.66em; text-align: justify;}
#last #att ul li{ padding-left: 2.5em; position: relative;}
#last #att ul li span{ position: absolute; left: 0; top: 0;}
#last #ideal{ position: relative;}
#last #ideal figure.img{ width: 483px; position: absolute; right: 0; bottom: -184px;}
#last .cta2{ position: relative; z-index: 3;}
#last .cta2 figure.btn img{ width: 720px;}
#last  .maincontent{ position: relative; z-index: 1;}
#last  .maincontent:after{ content: ""; width: 720px; height: 100%; background: none; border-radius: 40px; position: absolute; left: 0; right: 0; top: 0; margin: auto; z-index: -1; box-shadow:rgba(0, 0, 0, 0.1) 0 0 1rem 0.5rem;}
@media screen and (max-width:800px){
#last{ padding: calc((40/800)*100vw) 0;}
#last #att{ margin: calc((25/800)*100vw) calc((40/800)*100vw) 0;}
#last #att ul{ font-size: 0.6rem;}
#last #ideal figure.img{ width: calc((483/800)*100vw); bottom: calc((-184/800)*100vw);}
#last .cta2 figure.btn img{ width: calc((720/800)*100%);}
#last  .maincontent:after{ width: calc((720/800)*100%); border-radius: calc((40/800)*100vw);}
}



@media print, screen and (min-width:801px){
.smp{ display:none !important;}
}
@media screen and (max-width:800px){
.pc{ display:none !important;}
}