@charset "utf-8";
@import url('b392a3d57c194c0b9b6fdbdc076322b9.css');


/*----------------------------------------------
	Overall settings
-----------------------------------------------*/

body{ color: #111; text-align: center; font-weight: 400; font-family: 'Noto Sans JP', sans-serif; position: relative;}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
a{ color: #111; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .6; text-decoration:none;}
.underline{ text-decoration: underline;}
/* font */
.gothic{ font-family: 'Noto Sans JP', sans-serif;}
.mincho{ font-family: 'Noto Serif JP', serif; font-weight: 500;}
.regular{ font-weight: 400!important;}
.medium{ font-weight: 500!important;}
.bold{ font-weight: 700!important;}
/* bg */
.bg-white{ background: #fff;}
/* color */
.white{ color: #fff;}
.red{ color: #f00;}
.beige{ color: #785050;}
/* FadeUp */
.move.move-active.FadeUp{ animation: FadeUp 1s; opacity: 0;}
@keyframes FadeUp {
  0% { transform: translateY(60px); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}
.move.move-active.FadeLeft{ animation: FadeLeft 1s; opacity: 0;}
@keyframes FadeLeft {
  0% { transform: translateX(60px); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}
.move.move-active.FadeRight{ animation: FadeRight 1s;}
@keyframes FadeRight {
  0% { transform: translateX(-60px); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {/* 以下スマホサイズ */
	body{ min-width: inherit; font-size: 14px;}
	a:hover{ opacity: 1;}
}
@media screen and (max-width: 340px) {
	html{ font-size: 50%;}
}






/*----------------------------------------------
	header
-----------------------------------------------*/

header{ position: relative; z-index: 999;}
header .logo{ position: absolute; left: 0; top: 0; padding: 15px 0 0 30px;}
header .spmenu dt{ position: fixed; right: 180px; top: 0; width: 160px; line-height: 90px; color: #fff; font-size: 18px; background: #4D4D4D;}
header .spmenu dd{ position: fixed; right: 90px; top: 0; width: 90px; height: 90px; background: #000; cursor: pointer;}
header .spmenu dd span{ display: inline-block; position: absolute; left: 25px; width: 40px; height: 2px; background: #fff; -webkit-transition: all .2s; transition: all .2s;}
header .spmenu dd span:nth-child(1){ top: 33px;}
header .spmenu dd span:nth-child(2){ top: 44px;}
header .spmenu dd span:nth-child(3){ bottom: 33px;}
header.open .spmenu dd span:nth-child(1){ transform: rotate(45deg); top: 44px;}
header.open .spmenu dd span:nth-child(2){ opacity: 0;}
header.open .spmenu dd span:nth-child(3){ transform: rotate(-45deg); bottom: 44px;}
header .lang{ position: fixed; right: 0; top: 0; width: 90px; height: 90px; padding: 20px; background: #808080;}
header .lang a{ display: block; color: #fff; line-height: 1.5;}
header .lang a:hover{ opacity: 1;}
header .lang a:nth-child(1):hover{ color: #808080; background: #fff;}
header .lang a:nth-child(2){ border: 1px solid #fff;}
header nav{ display: none; position: fixed; right: 0; top: 90px; width: 340px; max-height: calc(100vh - 100px); background: #4D4D4D; overflow: auto;}
header nav ul{ padding: 1em 1.5em; color: #fff; font-size: 18px; text-align: left; border-top: 1px solid #AFAFAF;}
header nav ul li.sub{ padding-left: 1em; position: relative;}
header nav ul li.sub:before{ position: absolute; left: 0; top: 0; content: "-";}
header nav ul li a{ color: #fff;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	header{}
	header .logo{ padding: 3px 3%; width: 100%; height: 50px; text-align: left; background: rgba(255,255,255,.5);}
	header .logo img{ width: 165px;}
	header .spmenu dt{ display: none;}
	header .spmenu dd{ right: 50px; width: 50px; height: 50px;}
	header .spmenu dd span{ left: 12px; width: 26px; height: 2px;}
	header .spmenu dd span:nth-child(1){ top: 15px;}
	header .spmenu dd span:nth-child(2){ top: 24px;}
	header .spmenu dd span:nth-child(3){ bottom: 15px;}
	header.open .spmenu dd span:nth-child(1){ top: 24px;}
	header.open .spmenu dd span:nth-child(3){ bottom: 24px;}
	header .lang{ width: 50px; height: 50px; padding: 8px; font-size: 10px;}
	header nav{ top: 50px; width: 200px; max-height: calc(100vh - 50px);}
	header nav ul{ padding: .8em 0 .8em 1em; font-size: 14px;}
}



/*----------------------------------------------
	section
-----------------------------------------------*/

.mb150{ margin-bottom: 150px;}
.wrap{ clear: both; box-sizing: content-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%;}
/* ttl */
.pagettl{ line-height: 400px; color: #fff; font-size: 60px; font-weight: bold; text-shadow: 0px 0px 10px #000000, 0px 0px 10px #000000, 0px 0px 10px #000000, 0px 0px 10px #000000, 0px 0px 10px #000000;}
.pagettl.news{ background: url("../images/pagettl-news.jpg") center bottom / cover no-repeat;}
.pagettl.inquiry{ background: url("../images/pagettl-inquiry.jpg") center bottom / cover no-repeat;}
.pagettl.terms{ background: url("../images/pagettl-terms.jpg") center bottom / cover no-repeat;}
.pagettl.product{ background: url("../images/pagettl-product.jpg") center bottom / cover no-repeat;}
.pagettl.topmessage{ background: url("../images/pagettl-topmessage.jpg") center bottom / cover no-repeat;}
.pagettl.outline{ background: url("../images/pagettl-outline.jpg") center bottom / cover no-repeat;}
.pagettl.access{ background: url("../images/pagettl-access.jpg") center bottom / cover no-repeat;}
.pagettl.philosophy{ background: url("../images/pagettl-philosophy.jpg") center bottom / cover no-repeat;}
.pagettl.history{ background: url("../images/pagettl-history.jpg") center bottom / cover no-repeat;}
.pagettl.csr{ background: url("../images/pagettl-csr.jpg") center bottom / cover no-repeat;}
.pagettlwrap{ display: block; width: 700px; margin: 0 auto; overflow: hidden; transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; animation: main-visual 1.2s;}
@keyframes main-visual {
	0% { transform: translate(-200%, 0);}
	100% { transform: translate(0, 0);}
}
.pagettlwrap span{ display: block; white-space: nowrap; transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; animation: main-visual-span 1.2s;}
@keyframes main-visual-span {
	0% { transform: translate(200%, 0);}
	100% { transform: translate(0, 0);}
}
.ttl1{ padding-top: .5em; margin-bottom: 1em; font-size: 42px; text-align: center; background: url("../images/ic-ttl1.svg") center top no-repeat;}
.ttl2{ padding: .4em 1em; color: #fff; font-size: 24px; font-weight: 500; line-height: 1.4; text-align: left; background: #785050; border-radius: 0 0 20px 0;}
/* btn */
.btn1{ display: inline-block!important; width: 100%!important; max-width: 300px; height: 60px!important; line-height: 58px!important; color: #785050!important; font-size: 18px!important; border: 1px solid #785050!important;}
.btn1:hover{ color: #fff!important; background: #785050!important; opacity: 1!important;}
.btn2{ display: inline-block; padding-left: 60px; width: 260px; line-height: 60px; text-align: center; background: #E4DCDC; position: relative;}
.btn2:before{ display: block; content: "＋"; position: absolute; left: 5px; top: 5px;  width: 50px; height: 50px; line-height: 50px; color: #785050; text-align: center; background: #fff;}
.btn3{ display: inline-block!important; width: 100%!important; max-width: 200px; height: 60px!important; line-height: 58px!important; color: #fff!important; font-size: 18px!important; background: #785050!important;}
.btn3:hover{ opacity: .7;}
/* list */
.icon1{ display: inline-block; padding-left: 1.5em; text-align: left; position: relative;}
.icon1:before{ content: "●"; position: absolute; left: 0; top: 0; color: #C8C8C8;}
.icon2{ display: inline-block; padding-left: 1em; text-align: left; position: relative;}
.icon2:before{ content: "»"; position: absolute; left: 0; top: 0; color: #785050; line-height: 1.8;}
/* pnav */
.pnav{ margin-bottom: 80px; padding: 1em 0; background: #eee;}
.pnav ol{ text-align: left;}
.pnav ol li{ display: inline-block; vertical-align: top;}
.pnav ol li:not(:last-child):after{ content: "　>　";}
/* pager */
.pager{ text-align: center;}
.pager:before{ content: "｜"; color: #000;}
.pager li{ display: inline-block;}
.pager li:after{ content: "｜"; color: #000;}
.pager li a{ display: inline-block; padding: 0 1em; color: #959595;}
.pager li a.active{ color: #785050; text-decoration: underline; pointer-events: none;}
.pager li a.active:hover{ opacity: 1;}
/* contactbtn */
.contactbtn a{ display: block; font-size: 21px; line-height: 1.4; height: 300px; background: url("../images/contactbtn-bg.jpg") center / cover no-repeat; position: relative;}
.contactbtn .wm{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 220px; height: 220px; background: url("../images/contactbtn-wm.svg") center / cover no-repeat;}
.contactbtn .wm span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;}
/* wpeditor */
.wpeditor{ text-align: left; clear: both; overflow: hidden;}
.wpeditor h1,.wpeditor h2,.wpeditor h3,.wpeditor h4,.wpeditor h5,.wpeditor h6,.wpeditor a{ font-weight: 500; line-height: 1.4; margin-top: 2em;}
.wpeditor a{ text-decoration: underline;}
.wpeditor h1{ padding: .4em 1em; margin-top: 0!important; color: #fff; font-size: 24px; font-weight: 500; line-height: 1.4; text-align: left; background: #785050; border-radius: 0 0 20px 0;}
.wpeditor h2{ font-size: 22px;}
.wpeditor h3{ font-size: 20px;}
.wpeditor h4{ font-size: 18px;}
.wpeditor h5{ font-size: 16px;}
.wpeditor h6{ font-size: 14px;}
.wpeditor p, .wpeditor ul, .wpeditor ol, .wpeditor table{ margin-top: 3em;}
.wpeditor figure{ text-align: left;}
.wpeditor figure figcaption{ width: 100%; padding: .5em 0; color: #666; font-size: 1.4rem; line-height: 1.4; text-align: left;}
.wpeditor .imgcolumn1{}
.wpeditor .imgcolumn2{ display: flex; justify-content: space-between;}
.wpeditor .imgcolumn2 figure{ width: 49%;}
.wpeditor img{ display: block; margin-top: 2em;}
.wpeditor p.date{ text-align: right; margin-top: 1em;}
.wpeditor p.pdf{ padding-left: 35px; margin-top: 1.5em; background: url(../images/ic-dl.png) left top .3em / 23px no-repeat;}
@media screen and (max-width:599px){
	.wpeditor{ padding-top: 15px;}
	.wpeditor h1{ font-size: 20px;}
	.wpeditor h2{ font-size: 1.8rem;}
	.wpeditor h3{ font-size: 1.6rem;}
	.wpeditor h4{ font-size: 1.5rem;}
	.wpeditor h5{ font-size: 1.4rem;}
	.wpeditor h6{ font-size: 1.3rem;}
	.wpeditor .imgcolumn1{ padding: 0;}
	.wpeditor .imgcolumn2{ padding: 0; display: block;}
	.wpeditor .imgcolumn2 figure{ width: auto;}
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	.mb150{ margin-bottom: 80px;}
	/* ttl */
	.pagettl{ line-height: 200px; font-size: 32px; white-space: nowrap;}
	.pagettlwrap{ display: block; width: 370px; margin: 0 auto; overflow: hidden; transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; animation: main-visual 1.2s;}
	.pagettlwrap span{ display: block; transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; animation: main-visual-span 1.2s;}
	.ttl1{ padding-top: .8em; margin-bottom: .5em; font-size: 26px; background-size: 20px;}
	.ttl2{ font-size: 20px;}
	/* btn */
	.btn1{ font-size: 16px!important;}
	.btn2{ padding-left: 50px; line-height: 50px;}
	.btn2:before{ width: 40px; height: 40px; line-height: 40px;}
	.btn3{ max-width: 300px; font-size: 16px!important;}
	/* pager */
	.pager{ margin-bottom: 40px;}
	/* pnav */
	.pnav{ margin-bottom: 50px; padding: .7em 0; line-height: 1.4;}
	/* contactbtn */
	.contactbtn a{ font-size: 13px; height: 200px; background: url("../images/contactbtn-bg-sp.jpg") center / cover no-repeat;}
	.contactbtn .wm{ width: 120px; height: 120px;}
}
@media screen and (max-width: 370px) {
	/* ttl */
	.pagettl{ font-size: 28px;}
	.pagettlwrap{ width: 320px;}
}



/*----------------------------------------------
	footer
-----------------------------------------------*/

footer{ color: #fff; background: #4D4D4D;}
footer .pagetop{ position: fixed; right: 20px; bottom: 20px; width: 48px; z-index: 99;}
footer .pagetop img{ cursor: pointer;}
footer .fnav{ display: flex; flex-direction: row-reverse; justify-content: space-between; text-align: left; padding: 80px 3%;}
footer .fnav a{ color: #fff;}
footer .fnav .leftcol{ width: 37%;}
footer .fnav .leftcol .about{ margin-bottom: 2em;}
footer .fnav .leftcol .about strong{ font-size: 28px; font-weight: normal; line-height: 1.4;}
footer .fnav .rightcol{ width: 60%; display: flex;}
footer .fnav .rightcol .link1{ width: 220px; margin-right: 50px;}
footer .fnav .rightcol .link1 a{ display: block; font-size: 18px; line-height: 50px; border-bottom: 1px solid #AFAFAF;}
footer .fnav .rightcol .link2{ flex: 1; width: 220px; margin-right: 50px;}
footer .fnav .rightcol .link2 dt{ font-size: 18px; line-height: 50px;}
footer .fnav .rightcol .link2 dd{ display: flex; flex-wrap: wrap; border-left: 1px solid #AFAFAF; border-top: 1px solid #AFAFAF;}
footer .fnav .rightcol .link2 dd a{ width: 50%; text-align: center; line-height: 40px; border-right: 1px solid #AFAFAF; border-bottom: 1px solid #AFAFAF;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	footer .fnav{ display: block; padding: 50px 5%;}
	footer .fnav .rightcol{ width: auto; display: block; border-top: 1px solid #AFAFAF; margin-bottom: 2em;}
	footer .fnav .rightcol .link1{ width: auto; margin-right: 0;}
	footer .fnav .rightcol .link1 a{ display: block; font-size: 14px; line-height: 40px;}
	footer .fnav .rightcol .link2{ width: auto; margin-right: 0; line-height: 40px;}
	footer .fnav .rightcol .link2 dt{ font-size: 14px; line-height: 40px;}
	footer .fnav .leftcol{ width: auto;}
	footer .fnav .leftcol .about{ font-size: 12px; margin-bottom: 1em;}
	footer .fnav .leftcol .about strong{ font-size: 20px;}
}



























/*---------------------------------------------------------------------------------------------------------
	Sub-page settings
---------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------
	/
-----------------------------------------------*/
.top1{ height: 100vh; position: relative; overflow: hidden;}
.top1 video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 177.77777778vh; height: 56.25vw;; min-height: 100%; min-width: 100%; z-index: -1;}
.top1wrap{ position: absolute; top: 40%; left: 0; width: 100%;}
.top1wrap .ttl{ width: 780px; margin: 0 10% 0 calc(90% - 780px);}
.top1wrap .ttl h2.pc{ display: block; transition: transform cubic-bezier(.215,.61,.355,1) .5s; animation: main-visual 2s; animation-timing-function: linear; overflow: hidden;}
.top1wrap .ttl h2.pc span{ display: block; transition: transform cubic-bezier(.215,.61,.355,1) .5s; animation: main-visual-span 2s; animation-timing-function: linear;}
.top1wrap .line{ position: absolute; left: calc(90% - 780px); bottom: 0; width: 100vw; height: 1px; background: #000; animation: top1line .5s linear 0s forwards;}
@keyframes top1line {
	0% { width: 0%;}
	100%{ width: 100%;}
}
.top2{ padding: 150px 0 100px; margin-top: -100px; color: #fff; text-shadow: 0px 0px 5px #000000, 0px 0px 5px #000000, 0px 0px 5px #000000, 0px 0px 5px #000000, 0px 0px 5px #000000; background: url("../images/top2-bg.png") center top / cover no-repeat; position: relative; z-index: 9;}
.top2 h2{ font-size: 30px; font-weight: normal; line-height: 1.6; margin-bottom: .5em;}
.top2 p{ font-size: 18px;}
.top3{ padding-top: 80px;}
.top3 h2{ margin-bottom: 0;}
.top3wrap{ padding-top: 170px; height: 550px; background: url("../images/top3-bg.jpg") center / cover no-repeat;}
.top3wrap .txt{ font-size: 18px; margin-bottom: 1.5em;}
.top3wrap .btn a{ display: inline-block; margin: 0 1em; width: 300px; font-size: 24px; line-height: 80px; background: #fff; box-shadow: 2px 2px 1px 0px rgba(0,0,0,.3);}
.top4{ padding-top: 80px;}
.top4wrap{ display: flex; flex-wrap: wrap;}
.top4wrap a{ width: 32.4%; margin-bottom: 1.4%; position: relative; overflow: hidden;}
.top4wrap a:not(:nth-child(3n)){ margin-right: 1.4%;}
.top4wrap a:before{ display: inline-block; content: ""; position: absolute; right: -1px; bottom: -1px; width: 40px; height: 40px; background: url("../images/top4-link.svg") no-repeat; z-index: 1;}
.top4wrap a span{ display: block; position: absolute; left: 0; top: 0; width: 100%; line-height: 80px; color: #fff; font-size: 24px; background: rgba(0,0,0,.5); z-index: 1;}
.top4wrap a:hover{ opacity: 1;}
.top4wrap a img{ transition: transform .6s ease;}
.top4wrap a:hover img{ transform: scale(1.15);}
.top5{ padding-top: 80px; margin-bottom: 150px;}
.top5wrap{ padding: 70px 0 50px; background: url(../images/bg-dot1.png) center / 15px repeat;}
.top5wrap2{ padding: 30px 5%; margin-bottom: 30px; text-align: left; background: #fff;}
.top5wrap2 dl{ display: flex;}
.top5wrap2 dl:not(:last-child){ margin-bottom: 30px;}
.top5wrap2 dl dt{ width: 8em; white-space: nowrap;}
.top5wrap2 dl dt:after{ content: "　»　";}
.top5wrap2 dl dd{ flex: 1;}
.top5wrap .more{ text-align: right;}
.top5wrap .more a{ display: inline-block; padding-right: 1.5em; width: 600px; line-height: 50px; color: #785050; text-align: right; background: url("../images/top5-more.svg") right bottom no-repeat;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	.top1{ height: auto; padding-top: 133%;}
	.top1wrap{ top: 60%;}
	.top1wrap .ttl{ width: 75%; margin: 0 10%;}
	.top1wrap .ttl h2 .img1{ display: block; transition: transform cubic-bezier(.215,.61,.355,1) .5s; animation: main-visual 1.3s; animation-timing-function: linear; overflow: hidden;}
	.top1wrap .ttl h2 .img1 span{ display: block; transition: transform cubic-bezier(.215,.61,.355,1) .5s; animation: main-visual-span 1.3s; animation-timing-function: linear;}
	.top1wrap .ttl h2 .img2{ display: block; transition: transform cubic-bezier(.215,.61,.355,1) .5s; animation: main-visual 3s; animation-timing-function: linear; overflow: hidden;}
	.top1wrap .ttl h2 .img2 span{ display: block; transition: transform cubic-bezier(.215,.61,.355,1) .5s; animation: main-visual-span 3s; animation-timing-function: linear;}
	.top1wrap .line{ position: absolute; left: 10%; bottom: 0; width: 100vw; height: 1px; background: #000; animation: top1line .5s linear 0s forwards;}
	.top2{ padding: 60px 0 30px; margin-top: -10%; background: url("../images/top2-bg-sp.png") center top / cover no-repeat; text-shadow: none;}
	.top2 .wrap div{ padding: 2em; background: rgba(0,0,0,.2);}
	.top2 h2{ font-size: 20px;}
	.top2 p{ font-size: 14px; line-height: 1.6;}
	.top3{ padding-top: 60px;}
	.top3wrap{ padding-top: 70px; padding-bottom: 30px; height: auto; background: url("../images/top3-bg-sp.jpg") center / cover no-repeat;}
	.top3wrap .txt{ font-size: 14px; text-align: left;}
	.top3wrap .btn a{ display: block; width: 250px; margin: 0 auto 1em; font-size: 16px; line-height: 50px;}
	.top4{ padding: 60px 0 0;}
	.top4wrap a{ width: 49%; margin-bottom: 2%;}
	.top4wrap a:not(:nth-child(3n)){ margin-right: 0;}
	.top4wrap a:not(:nth-child(2n)){ margin-right: 2%;}
	.top4wrap a:before{ width: 20px; height: 20px; background-size: 20px;}
	.top4wrap a span{ line-height: 40px; font-size: 14px;}
	.top5{ padding-top: 60px; margin-bottom: 80px;}
	.top5 h2{ margin-bottom: .5em;}
	.top5wrap{ padding: 50px 0 30px;}
	.top5wrap2{ margin-bottom: 10px;}
	.top5wrap2 dl{ display: block;}
	.top5wrap2 dl:not(:last-child){ margin-bottom: 15px;}
	.top5wrap .more a{ width: 200px; background: url("../images/top5-more-sp.svg") right bottom no-repeat;}
}



/*----------------------------------------------
	product/
-----------------------------------------------*/
.product1{ padding: 50px 0; background: #E4DCDC;}
.product1 h2{ margin-bottom: 1em;}
.product1 .wrap{ display: flex; justify-content: space-between;}
.product1 .wrap a{ display: flex; width: 48.5%; padding: 30px; align-items: center; justify-content: center; background: #fff; border: 1px solid #785050; position: relative;}
.product1 .wrap a:before{ display: inline-block; content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #785050 transparent;}
.product1 .wrap a span{ display: block; font-size: 18px;}
.product1 .wrap a span strong{ font-size: 36px; font-weight: normal; line-height: 1.6;}
.product2{ padding-top: 120px;}
.product2 article{ padding-bottom: 40px; position: relative;}
.product2 article:not(:last-child){ margin-bottom: 60px;}
.product2 article:before{ display: block; content: ""; position: absolute; top: 0; width: 70%; height: 100%; z-index: -1;}
.product2 article.box1:before{ right: 0; background: url("../images/bg-grid1.png") center top / 20px repeat;}
.product2 article.box2:before{ left: 0; background: url("../images/bg-border1.png") center top / 10px repeat;}
.product2 article.box3:before{ right: 0; background: url("../images/bg-grid2.png") center top / 9px repeat;}
.product2 article .wrap{ display: flex;}
.product2 article:nth-child(odd) .wrap{ flex-direction: row-reverse;}
.product2 article .wrap div{ padding-top: 30px; text-align: left;}
.product2 article:nth-child(odd) .wrap div{ padding-left: 40px;}
.product2 article:nth-child(even) .wrap div{ padding-right: 40px;}
.product2 article .wrap div h2{ font-size: 36px; font-weight: normal;}
.product2 article .wrap div .txt{ margin-bottom: 4em;}
.product2 article .wrap div figure img{ width: 115%; max-width: inherit; position: relative;}
.product2 article:nth-child(odd) .wrap div figure img{ margin-left: -15%;}
.product3{ padding-top: 80px;}
.product3wrap{ display: flex;}
.product3wrap dl{ width: 25%; padding: 0 10px; font-size: 18px; border-right: 1px solid #785050;}
.product3wrap dl:nth-child(1){ border-left: 1px solid #785050;}
.product3wrap dl:nth-child(2){ width: 50%;}
.product3wrap dl dt{ color: #fff; font-size: 24px; line-height: 70px; background: #785050;}
.product3wrap dl dd{ padding: 1em .5em 2em; text-align: left;}
.product3wrap dl:nth-child(2) dd{ display: flex;}
.product3wrap dl:nth-child(2) dd ul{ width: 55%;}
.product3wrap dl:nth-child(2) dd ul:nth-child(2){ width: 45%;}
.product3wrap dl:nth-child(2) dd ul li{ display: block!important;}
.product4{ padding-top: 80px;}
.product4 .box1 dl{ display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #785050;}
.product4 .box1 dl:first-child{ border-top: 1px solid #785050;}
.product4 .box1 dl dt{ flex: 1; font-size: 20px; text-align: left;}
.product4 .box1 dl dd{ width: 75%;}
.product4 .box1 dl dd input{ display: block; height: 70px; line-height: 70px; background: #eee; border: none;}
.product4 .catettl{ display: flex; line-height: 50px; background: #E2E2E2;}
.product4 .catettl p:nth-child(1){ width: 30%; border-right: 1px solid #fff;}
.product4 .catettl p:nth-child(2){ width: 70%;}
.product4 .catelist{ border-top: 1px solid #785050;}
.product4 .catelist dl{ display: flex; text-align: left; border-bottom: 1px solid #785050;}
.product4 .catelist dl dt{ width: 30%; padding: .8em 1em; border-right: 1px solid #fff; background: #eee;}
.product4 .catelist dl dd{ width: 70%;}
.product4 .catelist dl dd p{ padding: .8em 4em .8em 1em; position: relative; cursor: pointer;}
.product4 .catelist dl dd p:before{ display: block; content: "＋"; position: absolute; right: 0; top: 4px;  width: 50px; height: 50px; line-height: 50px; color: #785050; text-align: center; background: #E4DCDC;}
.product4 .catelist dl dd p.open:before{ content: "－"; background: #eee;}
.product4 .catelist dl dd ul{ display: none; padding-left: 2em; border-top: 1px solid #E4DCDC;}
.product4 .catelist dl dd ul li{ padding: .8em 1em;}
.product4 .catelist dl dd ul li:not(:last-child){ border-bottom: 1px dashed #E4DCDC;}
/* results */
.results{ margin-bottom: 60px; text-align: left; border-top: 1px solid #785050;}
.results li{ padding: .8em 1em; border-bottom: 1px solid #785050;}
/* detail */
.detail{ margin-bottom: 60px; text-align: left; border-top: 1px solid #785050;}
.detail dl{ display: flex; border-bottom: 1px solid #785050;}
.detail dl dt{ width: 25%; padding: .5em 1em; background: #eee;}
.detail dl dd{ flex: 1; padding: .5em 1em;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	.product1{ padding: 50px 0 30px;}
	.product1 .wrap{ display: block;}
	.product1 .wrap a{ display: block; width: auto; padding: 20px; margin-bottom: 20px;}
	.product1 .wrap a span{ font-size: 16px;}
	.product1 .wrap a span strong{ font-size: 24px;}
	.product2{ padding-top: 60px;}
	.product2 article .wrap{ display: block;}
	.product2 article .wrap div{ padding-top: 30px; margin-bottom: 30px;}
	.product2 article:nth-child(odd) .wrap div{ padding-left: 0;}
	.product2 article:nth-child(even) .wrap div{ padding-right: 0;}
	.product2 article .wrap div h2{ font-size: 24px;}
	.product2 article .wrap div .txt{ margin-bottom: 2em;}
	.product2 article .wrap div figure img{ width: 100%;}
	.product2 article:nth-child(odd) .wrap div figure img{ margin-left: 0;}
	.product3{ padding-top: 60px;}
	.product3wrap{ display: block;}
	.product3wrap dl{ width: auto!important; padding: 10px; font-size: 16px; border-right: none; border-bottom: 1px solid #785050;}
	.product3wrap dl:nth-child(1){ border-left: none; border-top: 1px solid #785050;}
	.product3wrap dl dt{ font-size: 20px; line-height: 50px;}
	.product3wrap dl dd{ padding: 1em .5em;}
	.product3wrap dl:nth-child(2) dd{ display: block;}
	.product3wrap dl:nth-child(2) dd ul{ width: auto!important;}
	.product4{ padding-top: 60px;}
	.product4 .box1 dl{ display: block;}
	.product4 .box1 dl dt{ font-size: 18px; margin-bottom: .5em;}
	.product4 .box1 dl dd{ width: auto;}
	.product4 .box1 dl dd input{ height: 60px; line-height: 60px;}
	.product4 .catelist dl dt{ padding: 1em;}
	.product4 .catelist dl dd p{ padding: 1em 4em 1em 1em;}
	.product4 .catelist dl dd p:before{ top: 5px; width: 45px; height: 45px; line-height: 45px;}
	/* results */
	.results{ margin-bottom: 40px;}
	/* detail */
	.detail{ margin-bottom: 40px;}
	.detail dl{ display: block;}
	.detail dl dt{ width: auto;}
}



/*----------------------------------------------
	news/
-----------------------------------------------*/
.news1{ margin-bottom: 60px; text-align: left; border-top: 1px solid #785050;}
.news1 dl{ display: flex; border-bottom: 1px solid #785050;}
.news1 dl dt{ width: 8em; padding: .5em 1em; background: #eee;}
.news1 dl dd{ flex: 1; padding: .5em 1.5em;}
/* detail */
.news2{ text-align: left; padding-bottom: 40px; border-bottom: 1px solid #785050;}
.news2 a{ text-decoration: underline;}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	.news1{ margin-bottom: 40px;}
	.news1 dl{ display: block;}
	.news1 dl dt{ width: auto;}
	.news1 dl dd{ padding: .5em 1em;}
}



/*----------------------------------------------
	inquiry/
-----------------------------------------------*/
.inquiry1{ text-align: left; border-top: 1px solid #785050;}
.inquiry1 dl{ display: flex; border-bottom: 1px solid #785050;}
.inquiry1 dl dt{ width: 25%; padding: .8em 1em; background: #eee;}
.inquiry1 dl dd{ flex: 1; padding: .5em 1em;}
.inquiry1 dl dd input{ width: 400px; height: 40px; line-height: 40px;}
.inquiry1 dl dd input.max{ width: 100%;}
.inquiry1 dl dd input[type="tel"]{ width: 250px;}
.inquiry1 dl dd input[type="email"]{ width: 500px;}
.inquiry1 dl dd select{ height: 40px; line-height: 40px;}
.inquiry1 dl dd textarea{ width: 100%; height: 300px;}
.inquiry2 input:nth-child(2){ margin-left: 30px;}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	.inquiry1 dl{ display: block;}
	.inquiry1 dl dt{ width: auto;}
	.inquiry1 dl dd{ padding: .8em 1em;}
	.inquiry1 dl dd input{ width: 100%!important; margin-right: 0!important;}
	.inquiry1 dl dd textarea{ height: 200px;}
	.inquiry2 input:nth-child(2){ margin-left: 0; margin-top: 20px;}
}



/*----------------------------------------------
	terms/
-----------------------------------------------*/
.terms1{ text-align: left;}
.terms1 .lead{ padding: 3em 0; border-top: 1px solid #785050;}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	.terms1 .lead{ padding: 2em 0;}
}



/*----------------------------------------------
	company/
-----------------------------------------------*/
/* topmessage */
.topmessage1{ max-width: 1080px; text-align: left;}
/* outline */
.outline1 table{ width: 100%; text-align: left; border-top: 1px solid #785050;}
.outline1 table th{ width: 12em; padding: .5em 1em; background: #eee; border-bottom: 1px solid #785050;}
.outline1 table td{ flex: 1; padding: .5em 1.5em; border-bottom: 1px solid #785050;}
.outline1 .add{ text-align: left; padding-bottom: 2em; border-bottom: 1px solid #785050;}
.outline2{ background: #eee;}
/* access */
.access1{ padding-top: 40px; text-align: left; position: relative;}
.access1:before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200px; background: #eee; z-index: -1;}
.access1 iframe{ width: 100%;}
/* philosophy */
.philosophy1{ background: #eee;}
.philosophy1 .wrap div{ padding: 80px 5%; background: #fff;}
.philosophy1 .wrap div p{ padding: 0 1em 1px; font-size: 24px; line-height: 3em; text-align: left; background-image: linear-gradient(180deg, #EBE5E5 1px, transparent 1px); background-size: 100% 3em;}
/* history */
.history1 table{ width: 100%; text-align: left; border-top: 1px solid #785050;}
.history1 table th{ width: 13em; padding: .5em 1em; background: #eee; border-bottom: 1px solid #785050;}
.history1 table td{ flex: 1; padding: .5em 1.5em; border-bottom: 1px solid #785050;}
/* csr */
.csr1 .list{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.csr1 .list li{ width: 23%; height: 7.5em; color: #fff; font-size: 24px; line-height: 1.4; position: relative; border-radius: 50%;}
.csr1 .list li:nth-child(1){ background: #009F50;}
.csr1 .list li:nth-child(2){ background: #F5AA00;}
.csr1 .list li:nth-child(3){ background: #E5002D;}
.csr1 .list li:nth-child(4){ background: #2C4197;}
.csr1 .list li span{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
.csr1 .btn{ text-align: right; margin-bottom: 80px;}
.csr2{ background: #eee;}
.csr2 .cc10 div{ display: flex; justify-content: space-between; position: relative; z-index: 5;}
.csr2 .cc10 div dl{ width: 49%; background: #fff; border: 2px solid #009F50;}
.csr2 .cc10 div dl.color1{ width: 39%;}
.csr2 .cc10 div dl.color2{ width: 59%; border-color: #F5AA00;}
.csr2 .cc10 div dl.color3{ border-color: #E5002D;}
.csr2 .cc10 div dl.color4{ border-color: #2C4197;}
.csr2 .cc10 div dl dt{ padding: .5em 1em; color: #fff; line-height: 1.4; text-align: center;}
.csr2 .cc10 div dl.color1 dt, .csr2 .cc10 div dl.color1 dd p span{ background: #009F50;}
.csr2 .cc10 div dl.color2 dt, .csr2 .cc10 div dl.color2 dd p span{ background: #F5AA00;}
.csr2 .cc10 div dl.color3 dt, .csr2 .cc10 div dl.color3 dd p span{ background: #E5002D;}
.csr2 .cc10 div dl.color4 dt, .csr2 .cc10 div dl.color4 dd p span{ background: #2C4197;}
.csr2 .cc10 div dl dd{ padding: 1em; font-size: 17px; text-align: left;}
.csr2 .cc10 div dl dd p{ padding-left: 2em; position: relative;}
.csr2 .cc10 div dl dd p span{ display: inline-block; position: absolute; left: 0; top: .3em; width: 1.6em; height: 1.6em; line-height: 1.4; color: #fff; text-align: center; border-radius: 50%;}
.csr2 .cc10 figure{ position: relative;}
.csr2 .cc10 figure:before{ display: block; content: ""; position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; transform: translate(-50%, -50%); background: #fff; border-radius: 50%;}
.csr2 .cc10 figure img{ position: relative;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
	/* topmessage */
	.topmessage1 img{ max-width: 350px; width: 100%;}
	/* outline */
	.outline1 table th{ width: 10em;}
	/* philosophy */
	.philosophy1 .wrap div{ padding: 40px 5%;}
	.philosophy1 .wrap div p{ font-size: 18px; line-height: 2.5em; background-size: 100% 2.5em;}
	/* history */
	.history1 table th{ display: block; width: auto; border-bottom: none;}
	.history1 table td{ display: block; padding: .5em 1em;}
	/* csr */
	.csr1 .list li{ width: 48.5%; height: 6em; font-size: 18px; margin-bottom: 3%;}
	.csr1 .list li span{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
	.csr1 .btn{ text-align: right; margin-bottom: 80px;}
	.csr2{ background: #eee;}
	.csr2 .cc10 div{ display: block;}
	.csr2 .cc10 div dl{ width: auto!important; margin-bottom: 20px;}
	.csr2 .cc10 div dl dd{ font-size: 14px;}
	.csr2 .cc10 figure{ display: none;}
}