@charset "UTF-8";


/* topbg */

/* #contents */
section h2{ background:none!important}
.outline1-1 { padding:30px 0 10px; font-size:4.2rem;color:#f39801;font-family: 'Lora', serif; }
.concept .outline1-1{ color:#fff}
.concept .outline1-1 span{ color:#fff}
.product .outline1-1{ color:#fff}

/* event */
.event ul { display:flex}
.event ul li { width:50%; margin:0 5px ;box-sizing:border-box; background: 50% 0% no-repeat; background-size:0 0;padding-top:0;}
.event ul li img{ width: 100%;}
.event ul li a{ position:relative; display:block;}
.event ul li a:hover{ opacity:.5}
/*
.event ul li:first-child{ background:url(../../img/event01.jpg) left top no-repeat; background-size:100% auto;padding-top:43%;}
.event ul li:last-child{ background:url(../../img/event02.jpg) left top no-repeat; background-size:100% auto;padding-top: 43%;}
*/
.event-data{ margin:5px 0;font-family: 'Lora', serif; font-size:1rem }
.event-data span{ display:inline-block; padding:0 10px; margin-right:5px; background:#292929; color:#fff}
.event-data + p{ font-size:1.4rem; color:#007843}

/* concept*/
.concept{ background:url(../../img/concept02.jpg) center top repeat;}
.concept-wrap{background:url(../../img/concept01.png) center top no-repeat; background-size:100% auto}
.concept h2{ text-align:center}
.concept h2 span{ display:block; letter-spacing:-1px}
.concept h3{margin: 30px 0; text-align:center; font-size:2.4rem; font-weight:normal;font-family: 'Noto Serif JP', serif; color: #fff;}
.concept h3 + p{ max-width:660px; margin:0 auto; line-height:2;letter-spacing: 0; color: #fff}
.concept ul{ text-align:center}
.concept ul li{ display: inline-block; margin-bottom:10px}
.concept .buttons.first {
	margin-top: 30px;
	margin-bottom: 15px;
}

.concept .buttons li {
	display:block;
	margin-bottom: 15px;
}
.concept .buttons li:last-child{ margin-bottom:0px;}

.concept .buttons .button {
	position: relative;
	font-family: 'Noto Serif JP', serif;
	display: block;
	box-sizing:border-box;
	width: 100%;
	padding: 13px 5px;
	padding-left: 0;
	padding-right: 0;
	font-weight: 500;
	background: #fff;
	border-radius: 8px;
}
.concept .buttons .button:after{
	position: absolute;
	right: 5px;
	bottom:0;
	content: url("../../img/concept-arrow.png");
}
.concept .buttons .button dl{
	margin: 0;
}
.concept .buttons .button dl dt{
	display: block;
	color: #007843;
	font-size: 1.9rem;
}
.concept .buttons .button dl dt span{
	display: block;
}
.concept .buttons .button dl dd{
	color: #007843;
	font-size: 1.5rem;
	padding: 0 20px;
}
.concept .buttons .button dl dt:after{
	display: inline-block;
	margin: 6px auto 6px auto;
}
.concept .buttons .button1 dl dt:after{
	content: url("../../img/concept1.png")
}
.concept .buttons .button2 dl dt:after{
	content: url("../../img/concept2.png")
}
.concept .buttons .button3 dl dt:after{
	content: url("../../img/concept3.png")
}

.concept .buttons .button4 dl dt span{
	display: inline-block;
	vertical-align: middle;
}

.concept .buttons .button4 dl dt:before{
	display: inline-block;
	content: url("../../img/concept4.png");
	margin-right: 22px;
	vertical-align: middle;
	zoom:0.8;
}


.concept ul li.flow{ display: block;}
.concept  .banner_1  {
    width: 100%;
}
.concept  .banner_1 .inner a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: #fff;
}


.concept ul li.flow .banner_1:after { background: url(../../img/concept03.jpg) no-repeat center center; background-size:cover;}
.concept ul li.house .banner_1:after { background: url(../../img/concept04.jpg) no-repeat center center;}
.concept ul li.allergy .banner_1:after { background: url(../../img/concept05.jpg) no-repeat center center;}

/* imgarea */
.imgarea{ background:url(../../img/imgarea01_sp.jpg) center top no-repeat; background-size:100% auto; height:240px}

/*works*/
.works ul.line0 li{ line-height:0}
.works h2{ background:url(../../img/w_h2_bg.png) left bottom no-repeat!important;background-size: 260px auto!important; margin-bottom:40px}
.works h2 span{ display:block;}
.indexBody .works h2 span,
.indexBody .product h2 span,
.indexBody .concept h2 span{ margin-top:0; margin-left:0}
.works .btn02{ padding:20px 140px;}

.works .banner_1 em{
	font-style: normal;
}
.works .banner_1 .inner a{ font-size:1.8rem}

/*letter*/

.letter h2 {
    margin-bottom: 20px;
    position: relative;
    padding-top: 0;
}
    .letter h2.Verticaltitle:before {
        content: "";
        background: url(../../img/letter_icon.png) no-repeat;
        width: 46px;
        height: 35px;
        position: absolute;
        right: 0;
        top: 25%;
    }

.letter h2 span br{
    display: none;
}

.letter ul.list li{
    list-style: none;
    margin-bottom: 5%;
    overflow: hidden;
}

.letter ul.list li p.image{
    display: inline-block;
    margin-right: 20px;
    float: left;
}

.letter ul.list li dl{
    width: 57%;
    float: right;
    margin: 0;
}

.letter ul.list li dl dt,
.letter ul.list li dl dd.name{
    font-size: 87%;
}

.letter .btn02 {
    display: inline-block;
    padding: 20px 100px;
}

/*product*/
.product{ background: url(../../img/product_bg.jpg) center -30px no-repeat; background-size: auto}
.product h2{ color:#fff; text-align:center; margin-bottom:20px}
.product h2 span{ display:block; color:#fff;}
.product h2 + p{ color:#fff; padding:10px}
.product .section-wrap{ padding:10px 0}
.product .section-wrap ul{ position:relative; margin-top: 140px;  background: url(../../img/bg.jpg) repeat;}
.product .section-wrap ul li{ position:relative; top:-100px;margin: 0 10px; background:url(../../img/box.png) center top no-repeat;   background-size: 100% 100%;}
.product .section-wrap ul li h3{ margin-top: 0; padding-top:60px; padding-bottom: 30px; text-align:center;font-family: 'Noto Serif JP', serif; font-size:3rem; font-weight:normal; background:url(../../img/h3_bg.png) center bottom no-repeat}
.product .section-wrap ul li h3 span{ display:block;font-family: 'Lora', serif; font-size:1.4rem; color:#f39801 }
.product .section-wrap ul li h4{ margin-bottom:10px;font-family: 'Noto Serif JP', serif; text-align:center; color:#007843;font-size:1.8rem;font-weight:normal;  }
.product .section-wrap ul li p{ padding:10px 40px 20px;}
.product-wrap{ background:url(../../img/product_bg2.png) center 300px no-repeat; background-size: 180% auto; padding-bottom:60px}
.r-more{ text-align:center;font-family: 'Lora', serif;}
.r-more a{color:#007843;   padding-bottom: 2px;  border-bottom: 2px solid #007843; }
.product .section-wrap ul li p.r-more{ padding:0 0 40px;}
.product-btn{ margin:-80px 15px 10px;    position: relative; text-align:center}
.indexBody .btn04{max-width: 100%;}
/* .ather-area */
.ather-area .banner_1 {
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 100%;
	width:100%;
	height: 200px;border-radius:0; z-index:1
}
.ather-area .banner_1 .inner a{ display:block;
    padding-top: 80px;
	box-sizing:border-box;
    width: 100%;
    height: 200px;color: #fff;}

.ather-area .banner_1:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../../img/ather01_sp.jpg) no-repeat center bottom;
}
.ather-area li:nth-child(2) .banner_1:after {  background: url(../../img/ather02_sp.jpg) no-repeat center top;}

/*news*/
.news{ border-bottom:1px solid #d1d1d1}
.news h2{ text-align:center}
.news ul{ margin:10px 0 20px}
.news ul li{margin-bottom:15px}
.news li a{ display:flex; }
.news li img{ width:120px; height:92px; margin-right:15px}
.news li div span,
.blog li span{font-family: 'Lora', serif;}

/*blog*/
.blog{ border-bottom:1px solid #d1d1d1}
.blog h2{ text-align:center}
.blog ul{ margin-bottom:30px}
.news .btn04,
.blog .btn04{ padding: 10px 0; font-size:1.6rem}
.blog .btn04{ margin-bottom:40px}


@media screen and (max-width: 360px) {
.event-data + p{ font-size:1.4rem;}
.works .banner_1 { width: 300px;height: 265px;}
.works .banner_1 .inner a{ width: 300px; height: 265px;	padding-top: 180px;}
.prl15_80{ padding:15px 60px!important; white-space:nowrap}
}

@media screen and (min-width:481px) {



}
@media screen and (max-width: 960px) {
.event-left .btn02{ display:none}
.works .btn02{ display: inline-block;padding: 20px 100px;}

	.works .banner_1{
		height: auto;
		margin-bottom: 5%;
	}

	.works .banner_1 .inner{
		text-shadow: 0 0 0 #000;
	}

	.works .banner_1 .inner a{
		height: auto;
		padding: 0;
		color: #444;
	}

	.works .banner_1 .inner a img{
		/* height:340px; */
	}


	.works .banner_1:after{
		display: none;
	}

	.concept .buttons .button4{
		padding: 30px 5px;
	}

}

@media screen and (min-width: 961px) {


.utility-nav{   left:30px; right:auto; bottom:0}
.utility-nav li{ display:block; width:90px; margin-bottom:10px; z-index:1}
.pagetop{ position:fixed; right:10px; bottom:10px; z-index:1}
.section-wrap{width:1080px; margin:40px auto 0; padding:0;}
.event .section-wrap{display:flex;justify-content: space-between;}
.event .outline1-1{ padding-top:0}
.event h2 + p{ margin-bottom:40px}
.event .event-left{ width:330px}
.event-data{ margin:10px 0; font-size:1.4rem }
.event-data span{  padding:0 10px; margin-right:10px;}
.event-data + p{ font-size:1.8rem; color:#007843}
.event ul li{ width:334px; margin-left:40px; background-size:auto 180px;padding-top:180px;}
.event ul li img.sp{display:none}
/*
.event ul li:first-child{ background: url(../../img/event01_pc.jpg) left top no-repeat; background-size:334px auto;padding-top:180px;}
.event ul li:last-child{ background:url(../../img/event02_pc.jpg) left top no-repeat; background-size:334px auto;padding-top: 180px;}
*/
.concept{background:url(../../img/concept001.png) center top no-repeat; background-size: cover}
.concept h3{ font-size:3.2rem; }
.concept-wrap{background:none}
.concept p{ text-align: center}
.concept .section-wrap{ padding-bottom:80px; padding-top: 40px;}
.concept .p40{ padding:40px 0 20px}
.concept .buttons {
}
.concept .buttons li {
	display: inline-block;
	width: 26%;
	margin-right:35px;
}
.concept .buttons li:last-child{ margin-right:0px;}

.concept .buttons .button {
	box-sizing:border-box;
	width: 100%;
	padding: 33px 5px;
}
.concept .buttons .button dl dt:after{
	margin: 14px auto 12px auto;
}

.concept .buttons .button4 dl{
	display: table;
	width: 100%;
}
.concept .buttons .button4 dl > *{
	display: table-cell;
	vertical-align: middle;
}
.concept .buttons .button4 dl dt{
	display: table-cell;
	text-align: center;
	width: 40%;
}
.concept .buttons .button4 dl dt:before{
	margin-right: 42px;
	zoom:1;
}
.concept .buttons .button4 dl dd{
	padding: 0;
	text-align: left;
}


.concept ul li.flow  {
	display: inline-block;
    width: 86%;
}
.concept  .banner_1  {
    width: 100%;
    height: 100px;
}
.concept  .banner_1 .inner a {
    display: block;
    padding-top: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 104px;
    color: #fff;
}

.imgarea{
	background:url(../../img/imgarea01.jpg) center center no-repeat;
	height:480px;
	background-size: cover;
	-webkit-background-size: cover;
	background-attachment: fixed;
}
.tablet .imgarea{
	background-attachment: scroll;
}
.case-wrap{width:1080px; margin:0 auto; padding:40px 0 ; }
.works .section-wrap{   margin-top: 40px; background:url(../../img/works_bg.png) center top no-repeat}
.works .section-wrap h2{ padding-bottom:60px; background:none!important}
.works .section-wrap{ width:1260px}
.works h2{ text-align:center; background:none}
.works h2 span{ margin-top:-5px;}
.works ul li .banner_1 img.img {
	display: none;
}

.works ul li .banner_1:after {
	background: 50% 50% no-repeat;
	background-size: cover!important;
}

.w-btn{   top: 60px; right: 50px; width:148px; height:148px}
.product{background: url(../../img/product_bg.jpg) center -80px no-repeat; background-size:cover}
.product-wrap{ padding-bottom:60px; background:url(../../img/product_bg2.png) center 400px no-repeat; background-size: 100% auto}
.product .section-wrap ul{ display: flex; width:1080px; margin:0 auto; background:none }
.product .section-wrap ul li{position: relative; top:auto;width:30%; margin:0;  padding-bottom: 70px;}
.product .section-wrap ul li:nth-child(2){ margin:0 49px;}
.product .section-wrap ul li h3{ padding-top: 80px; padding-bottom: 30px;}
.product h2{ padding-top:60px}
.product h2 + p{ width:680px; margin:0 auto}
.product .section-wrap ul li p.r-more{position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 10px;}
.product-btn{ margin:30px 5px }
.ather-area{ text-align:center; font-size:0; letter-spacing:-1px}
.ather-area li{ width:50%; display:inline-block; }
.ather-area .banner_1 {height: 380px;}
.ather-area .banner_1 .inner a{ padding-top: 160px; height: 380px; font-size:2.8rem}
.ather-area .banner_1 .inner a span{ margin-top:10px}
.ather-area .banner_1:after {  background: url(../../img/ather01.jpg) no-repeat center bottom;}
.ather-area li:nth-child(2) .banner_1:after {    background: url(../../img/ather02.jpg) no-repeat center top;}
.news h2,
.blog h2{text-align: left; width:60px; padding:0;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;}
.blog .section-wrap > div{
	min-width: 80%;
}

.nb-wrap{ display:flex; width:1080px; margin:0 auto 40px; justify-content: space-between;}
.nb-wrap .outline1-1{ padding-top:0}
.news,.blog{ padding-top:40px;border:none; }
.nb-wrap .section-wrap{ width:590px; display:flex;  flex-wrap: wrap;}
.news ul{ margin-top:0}
.news ul li{ margin-bottom:20px}
.blog .outline1-2{ margin-top:0}
.news li img{ width:140px; height:100px}

/* letter */

.letter{
    background: #fff;
    padding-top: 30px;
}

.letter .section-wrap:after {
clear:both;
display:block;
content:"";
}

.letter h2.Verticaltitle{
    display: inline-block;
    float: left;
    color: #242424;
    position: relative;
}

.letter h2.Verticaltitle:before{
    content: "";
    background: url("../../img/letter_icon.png") no-repeat;
    width: 46px;
    height: 35px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -20px;
}

.letter h2.Verticaltitle span{
    position: absolute;
    writing-mode: vertical-rl;
    top: 100%;
    left: 50%;
    right: 50%;
    width: 20px;
    height: 180px;
    display: inline-block;
    margin: 0;
}

.letter ul.list{
    width: 75%;
    float: right;
}

.letter ul.list li{
    overflow: hidden;
    width: 50%;
    float: left;
}

.letter ul.list li a{
    padding: 30px 30px 30px 0;
    display: block;
    overflow: hidden;
}

.letter ul.list li:first-child{

}

.letter ul.list li p.image{
    margin-right: 25px;
    display: inline-block;
    float: left;
}

.letter ul.list li dl{
    width: 56%;
    float: right;
    margin: 0;
}

.letter ul.list li dl dt{
    font-size: 87%;
}

    .letter ul.list li dl dd.name{
        font-size: 87%;
    }
.letter .p60 {
    clear: both;
}

.letter .btn02 {
    padding: 20px 140px;
}














}


.model-bnr-wrap{
	margin: 50px 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
}
@media screen and (min-width: 576px) {
	.model-bnr-wrap{
		margin: 50px 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20px;
	}
}