@charset "utf-8";

/* --------
[コーディングルール]
・基本classのみ使用し、idはアンカーやJSで使用
・class名、フォルダ名、ファイル名はハイフン(-）区切り
・各ページのcssはstyle.cssにmainタグにページのclass（.top等)で指定

[メディアクエリー]
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}
-------- */


/* .top */

.main-slide{ 
position: relative;
overflow: hidden;
margin:20px auto 125px;
max-width: 1460px;
}
@media (max-width: 750px) {
.main-slide{ 
margin:0 0 15%;
 }
}

.main-slide li{
text-align: center;
}
@media (max-width: 1460px) {
.main-slide li img{
width: 100%;
	}
}
/* news */
.news-area{
max-width: 1160px;
margin: auto;
}
.news-area h2{
text-align: center;
margin-bottom:65px;
}
@media (max-width: 750px) {
.news-area{
margin-bottom:10%;
 }
.news-area h2{
margin-bottom:9%;
 }
.news-area h2 img{
width:78px;
 }
}
.news-area .banner{
margin-bottom: 80px;
}
@media (max-width: 750px) {
.news-area .banner{
margin-bottom: 4%;
padding: 0 4%;
 }
}
/* about */
.about-wc{
max-width: 1160px;
margin: auto;
}
@media (max-width: 750px) {
.about-wc .cont-title img{
width:308px ;
 }
}
.about-wc .box{
display: flex;
justify-content: space-between;
margin-bottom:45px;
}
@media (max-width: 750px) {
.about-wc .box{
margin-bottom:8%;
flex-wrap:wrap;
padding: 0 4%;
 }
}

.about-wc .box div:first-child{
width: 505px;
}
@media (max-width: 750px) {
.about-wc .box div:first-child{
width: 100%;
order:1;
 }
}
.about-wc .box div:last-child{
width: 583px;
}
@media (max-width: 750px) {
.about-wc .box div:last-child{
width: 100%;
order:0;
 }
}

.about-wc .box div h3{
font-family: 'Garamond', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'メイリオ', Meiryo, serif;
font-size: 38px;
margin-bottom: 15px;
padding-top: 20px;
letter-spacing: -3px;
line-height: 1;
}
@media (max-width: 750px) {
.about-wc .box div h3{
font-size: 20px;
margin-bottom: 2%;
padding:5% 0 0 5%;
letter-spacing: -1px;
font-weight: bold;
 }
}
.about-wc .box div h3 + p{
font-size: 18px;
line-height: 2;
letter-spacing: -0.5px;
}
@media (max-width: 750px) {
.about-wc .box div h3 + p{
font-size: 11px;
padding: 0 0 0 5%;
font-weight: bold;
letter-spacing: -0.5px;
 }
}
@media (max-width: 350px) {
.about-wc .box div h3 + p{
font-size: 10px;
 }
}

/* wc-area */
.wc-area{
max-width: 1160px;
margin:80px auto 0;
}
@media (max-width: 750px) {
.wc-area{
margin:10% 0 0;
 }
}
@media (max-width: 750px) {
.wc-area .cont-title img{
width:262px ;
 }
}
.wc-area .item_list{ 
max-width:1159px ;
}

.wc-area .item_list li{
width: 283px; 
height: 283px; 
overflow: hidden; 
margin: 0 9px 9px 0; 
float: left; 
position: relative; 
}
@media (max-width: 750px) {
.wc-area .item_list li{
width: 45%; 
height: auto; 
margin: 0 1% 2% 4%; 
max-width: 49%;
max-height: 100%;

 }
.wc-area .item_list li:nth-child(even){
float: right;
margin: 0 4% 2% 1%;
}
.wc-area .item_list li img{
height: auto;
 }
}

@media (min-width: 751px) {
.wc-area .item_list li:nth-child(4n){ 
margin-right:0;  
 }
}


.aw-area{
max-width: 1160px;
margin:80px auto 0px;
padding: 60px 0 0;
border-top:1px solid #640000; 
}
@media (max-width: 750px) {
.aw-area{
margin:8% 4% 0;
padding: 8% 0 0;
border-top:1px solid #640000; 
 }
}
@media (max-width: 750px) {
.aw-area .cont-title img{
width:309px;
 }
}
.aw-area .item_list{ 
max-width:1160px ;
}
.aw-area .item_list li{
max-width: 380px; 
max-height: 380px; 
overflow: hidden; 
margin: 0 10px 10px 0; 
float: left; 
position: relative; 
}
@media (max-width: 750px) {
.aw-area .item_list li{
width: 49%; 
height: auto; 
margin: 0 1% 2% 0; 
max-width: 49%;
max-height: 100%;
 }
.aw-area .item_list li:nth-child(even){
float: right;
margin: 0 0 2% 1%;
}
.aw-area .item_list li img{
height: auto;
 }
}
@media (min-width: 751px) {
.aw-area .item_list li:nth-child(3n){ 
margin-right:0;  
 }
}
.aw-area .item_list li.last{
padding:65px 40px;
box-sizing: border-box;
color: white;
font-family: 'Garamond', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'メイリオ', Meiryo, serif;
font-size: 24px;
letter-spacing: -1.5px;
line-height: 2;
text-align: center;
}
@media (max-width: 750px) {
.aw-area .item_list li.last{
padding:0;

 }
}
.aw-area .item_list li.last a{
padding:13px 0 10px;
font-size: 18px;
margin-top: 10px;
}
@media (max-width: 750px) {
.aw-area .item_list li.last a{
padding:0;
margin-top:0;
 }
}

.basic-area{
max-width: 1160px;
margin:165px auto 105px;
padding-bottom: 75px;
border-bottom:1px solid #640000; 
}
@media (max-width: 750px) {
.basic-area{
margin:8% 4% 9%;
padding: 8% 0 0;
border-top:1px solid #640000; 
border-bottom: 0;
 }
}
@media (max-width: 750px) {
.basic-area .cont-title img.sp-s{
width:283px;
display: inline !important;
 }
}

.basic-area .item_list{ 
max-width:1160px ;
}
.basic-area .item_list li{
max-width: 232px; 
max-height: 232px; 
overflow: hidden; 
margin: 0; 
float: left; 
position: relative; 
}
@media (max-width: 750px) {
.basic-area .item_list li{
width: 49%; 
height: auto; 
margin: 0 1% 2% 0; 
max-width: 49%;
max-height: 100%;
 }
.basic-area .item_list li:nth-child(even){
float: right;
margin: 0 0 2% 1%;
}
.basic-area .item_list li img{
height: auto;
 }
}

.story-area{
max-width: 1160px;
margin:0 auto;
}
@media (max-width: 750px) {
.story-area{
padding: 0 4%;
}
.story-area .cont-title img.sp-s{
width:289px;
display: inline !important;
 }
}

.story-area .box{
border-top: 1px solid black;
padding: 30px 0;
display: table;
width: 100%;
}
@media (max-width: 750px) {
.story-area .box{
padding: 9% 0;
 }
}

.story-area .box .txt-area{
max-width:578px;
display: table-cell;
vertical-align: top;
}
@media (max-width: 750px) {
.story-area .box .txt-area{
display: block;
 }
}

.story-area .box .txt-area .icon{
margin-bottom:30px;
}
@media (max-width: 750px) {
.story-area .box .txt-area .icon{
margin-bottom:4%;
width: 75px;
 }
.story-area .box .txt-area .icon img{
height: auto;
 }
}

.story-area .box .txt-area h3{
font-family: 'Garamond', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'メイリオ', Meiryo, serif;
font-size: 34px;
letter-spacing: -1.5px;
padding-left: 15px;
}
@media (max-width: 750px) {
.story-area .box .txt-area h3{
font-size: 20px;
letter-spacing: -1.5px;
padding-left: 5%;
font-weight: bold;
 }
}

.story-area .box .txt-area h3 + p{
font-size: 20px;
line-height: 2;
letter-spacing: -1px;
padding-left: 15px;
}
@media (max-width: 750px) {
.story-area .box .txt-area h3 + p{
font-size: 11px;
padding-left: 5%;
padding-bottom: 4%;
font-weight: bold;
 }
}

.story-area .box .thumb-area{
max-width:583px;
display: table-cell;
text-align: right;
}
@media (max-width: 750px) {
.story-area .box .thumb-area{
display: block;
text-align: center;
margin: auto;
 }
}
.story-area .box.num1 .thumb-area{
padding-top: 106px;
}
.story-area .box.num2 .thumb-area{
padding-top: 160px;
}
.story-area .box.num3 .thumb-area{
padding-top: 125px;
}
.story-area .box.num4 .thumb-area{
padding-top: 95px;
}
@media (max-width: 750px) {
.story-area .box.num1 .thumb-area,.story-area .box.num2 .thumb-area,.story-area .box.num3 .thumb-area,.story-area .box.num4 .thumb-area{
padding-top:4%;
 }
}

.shop-area{
padding: 125px 0 150px;
max-width: 1160px;
margin:0 auto;
font-weight: normal;
}
@media (max-width: 750px) {
.shop-area{
padding: 9% 0 0;
border-top:1px solid black; 
margin: 0 4%;
 }
}
@media (max-width: 750px) {
.shop-area .cont-title img{
width:147px;
height: auto;
 }
}
.shop-area .cont-title + p{
text-align: center;
font-size: 20px;
margin-bottom:60px;
}
@media (max-width: 750px) {
.shop-area .cont-title + p{
font-size: 11px;
margin-bottom:7%;
 }
}

.shop-area .top-thumb{
margin-bottom:60px;
}

@media (max-width: 750px) {
.shop-area .top-thumb{
margin-bottom:8%;
 }
}

@media (min-width: 1130px) {
.shop-area .shop-list{
width:565px;
 }
}
@media (max-width: 1129px) {
.shop-area .shop-list{
max-width: 100%;
 }
}
@media (max-width: 750px) {
.shop-area .shop-list{
margin-bottom: 10%;

 }
}

.shop-area .shop-list.left{
float: left;
}
.shop-area .shop-list.right{
float: right;
}
@media (max-width: 750px) {
.shop-area .shop-list.left{
float: none;
}
.shop-area .shop-list.right{
float: none;
 }
}

.shop-area .shop-list h3{
border-bottom: 1px solid black;
padding-bottom: 15px;
margin-bottom: 15px;
font-size: 18px;
}
@media (max-width: 750px) {
.shop-area .shop-list h3{
padding-bottom: 4%;
margin-bottom: 4%;
font-size: 12px;
font-weight: bold;
 }
}

.shop-area .shop-list section{
margin-bottom: 45px;
}
@media (max-width: 750px) {
.shop-area .shop-list section{
margin-bottom: 8%;
 }
}

.shop-area .shop-list section h4{
color: #808080;
font-size: 18px;
margin:0 0 5px -0.5em;
}
@media (max-width: 750px) {
.shop-area .shop-list section h4{
font-size: 13px;
margin:0 0 3% -0.5em;
 }
}

.shop-area .shop-list section .shop-tbl{
font-size: 16px;
width: 100%;
}
@media (max-width: 750px) {
.shop-area .shop-list section .shop-tbl{
font-size: 12px;
 }
}

.shop-area .shop-list section .shop-tbl th{
font-weight: normal;
padding-bottom: 5px;
width: 440px;
}
@media (max-width: 750px) {
.shop-area .shop-list section .shop-tbl th{
font-weight: bold;
padding-bottom: 3%;
width: 65%;
letter-spacing: -0.5px;
 }
}

.shop-area .shop-list section .shop-tbl td{
padding-bottom: 5px;
text-align: left;
}
@media (max-width: 750px) {
.shop-area .shop-list section .shop-tbl td{
padding-bottom: 3%;
font-weight: bold;
letter-spacing: -0.5px;
text-align: right;
 }
}

.contact-area{
max-width: 1294px;
margin: auto;
display: table;
}
@media (max-width: 750px) {
.contact-area{
padding: 9% 0 0;
border-top:1px solid black; 
margin: 0 4%;
display: block;
 }
}
.contact-area .title-box{
display: table-cell;
width: 647px;
vertical-align: middle;
text-align: center;
background:#e9ddcd;
}
@media (max-width: 750px) {
.contact-area .title-box{
display:block;
width: auto;
text-align: center;
background:none;
 }
}
.contact-area .title-box h3{
font-size: 40px;
font-family: 'Garamond', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'メイリオ', Meiryo, serif;
margin-bottom: 60px;
}
@media (max-width: 750px) {
.contact-area .title-box h3{
font-size: 20px;
margin-bottom: 5%;
font-weight: bold;
 }
}
.contact-area .title-box h3 + p{
font-size: 18px;
}
@media (max-width: 750px) {
.contact-area .title-box h3 + p{
font-size: 10px;
margin-bottom: 7%;
font-weight: bold;
letter-spacing: -0.5px;
 }
}

.contact-area .btn{
display: table-cell;
vertical-align: top;
max-width:647px;
}
@media (max-width: 750px) {
.contact-area .btn{
display:block;
max-width:647px;
 }
}