@charset "UTF-8";
/* CSS Document */

html{
	font-size:62.5%;/*16px×62.5%=10px*/
}

body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",sans-serif;
	font-weight: 500;
	color:#595757;
	font-size: 1.6rem;
	font-feature-settings: "palt";
	letter-spacing: .11em;
	line-height: 1.75;
}
a{
	text-decoration: none;
}
main{
	max-width: 960px;
	margin: 0 auto;
}
.text-center{
	text-align: center;
}
.sp-img{
	display: none;
}

/*---------------------
* section
*----------------------*/
.section-title{
	font-size: 3.0rem;
	color:#f0b253;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	margin-top: 80px;
	padding-top: 100px;
	text-align: center;
	line-height: 1;
}
.section-title-ja{
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	padding-top: 15px;
	margin-bottom: 80px;
	color: #595757;
}

/*---------------------
*          btn
*----------------------*/
.btn-access{
	width: 188px;
	box-sizing: border-box;
	margin: 0 auto;
}
.btn-access:hover{
	background-color: #f0b253;
	transition: all 1s;
}
.btn-access a{
	display: block;
	border: 1px solid #f0b253;
	padding: 6px;
	position: relative;
	z-index: 100;
	font-size: 1.5rem;
	color:#f0b253;
	text-align: center;
}
.fas.fa-walking{
	font-size: 1.8rem; 
	padding-left: 10px;
}
.btn-access a:hover{
	color: #fff;
	transition: all 0.5s;
}
.btn-01{
	max-width: 300px;
	box-sizing: border-box;
	margin-left: 34px;
	margin:0 auto;
	margin-top: 54px;
}
.btn-01:hover{
	background-color: #f0b253;
	transition: all 1s;
}
.btn-01 a {
	display: block;
	border: 1px solid #f0b253;
	padding: 10px;
	position: relative;
	z-index: 100;
	font-size: 1.5rem;
	color:#f0b253;
	text-align: center;
}
.btn-01 a:hover{
	color: #fff;
	transition: all 0.5s;
}
.fas.fa-book-open {
	font-size: 1.8rem; 
	padding-right: 10px;
}
.fas.fa-shopping-cart{
	font-size: 1.8rem; 
	padding-right: 10px;
}
.btn-map{
	max-width: 300px;
	box-sizing: border-box;
	margin-top: 35px;
}
.btn-map:hover{
	background-color: #87775c;
	transition: all 1s;
}
.btn-map a {
	display: block;
	border: 1px solid #87775c;
	padding: 10px;
	position: relative;
	z-index: 100;
	font-size: 1.8rem;
	color:#87775c;
	text-align: center;
}
.btn-map a:hover{
	color: #fff;
	transition: all 0.5s;
}
/*---------------------
* navigation
*----------------------*/
.navigation{
	width: 100%;
	height: 80px;
	margin: 0 auto;
	background-color: #eee0b5;
	background-color: rgba(238,224,181,1);
	position: fixed;
	z-index: 1000;
}
.header-inner{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.header-logo{
	width: 80px;
	padding: 13px 19px 0 24px
}
.tagline{
	color:#5f513a;
	font-size: 1.4rem;
	line-height: 0;
	padding-top: 44px;
	flex:none;
}
.header-logo-block{
	display: flex;
}
.category li{
	color: #5f513a;
	font-size:1.4rem;
	font-weight: bold;
}
.sns i{
	color: #5f513a;
	font-size: 1.8rem;
	padding-right: 15px;
}
.sns i:hover{
	color: #be9738;
	transition: all 1s;
}
.category{
	display: flex;
}
.category-list{
	display: flex;
}
.category-item{
	padding-right: 35px;
	padding-top: 33px;
}
.nav-sns{
	display: flex;
}
.sns{
	padding-right: 15px;
	padding-top: 33px;
}
.navigation a{
	color:#5f513a;
}
.navigation a:hover {
  color: #be9738;
	transition: all 0.5s;
}
.sp-nav{
	display: none;
}

/*---------------------
* header
*----------------------*/
.header{
	width: 100%;
	margin: 0 auto;
	padding-top: 50px;
}
.header-block{
	width: 100%;
	display: flex;
	line-height: 0;
	margin-top: 30px;
}
.header-title{
	width: 35%;
	height: 527px;
	background-color: #f8f1db;
}
.title-text{
	width:237px;
	margin: 0 auto;
	padding-top: 55px;
}
.header-image{
	width:65%;
	height: 527px;
	background-image: url(../image/index/hiro1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
 
/*---------------------
* concept
*----------------------*/
.concept{
	font-size: 1.7rem;
	line-height:2.2;
	margin-left: 170px;
  padding-top: 140px;
	background-image: url("../image/index/concept.png");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: bottom right;
}
.category-paragraph{
	margin-top: 35px;
}
.concept-title{
	font-size: 3.0rem;
	color:#be9738;
	margin-bottom: 50px;
}
	
/*---------------------
*      about
*----------------------*/
.about-block{
	display: flex;
	justify-content:flex-start;
}
.about-img-box{
	width:300px;
	margin-right: 30px;
}
.about-detail{
	width: 550px;
}
.btn-access{
	margin-bottom: 30px;
}
table{
	width: 550px;
	margin-top: 30px;
	border-collapse: collapse;
}
td{
	font-size: 1.7rem;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 36px;
	padding-right: 25px;
	border:dashed 1px #be9738;
}
.theme{
	background: #f8f1db;
}
.table-comment{
	padding-top: 10px;
	font-size: 	1.4rem;
	line-height: 1.7;
}
.access-link{
	width: 188px;
	background: #fff;
	border: solid 2px #eee0b5;
	margin: 0 auto;
	line-height: 1;
	padding: 10px 0;
	font-size: 1.4rem;
}
 .about-link-text{
	color: #87775c;
}
.sp-br{
	display: none;
}

/*---------------------
*     menu
*----------------------*/
.menu-item{
	font-size: 2.4rem;
	line-height: 1;
}
.menu-item-en{
	display: block;
	font-family: 'Lato', sans-serif;
	color: #be9738;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	padding-top: 15px;
	padding-bottom: 60px;
}
.menu-item-block{
	display: flex;
	justify-content: space-between;
}
.menu-item-photo{
	width: 520px;
}
.menu-photo{
	width: 100%;
	padding-bottom: 200px;
}
.menu-photo.menu-last-photo{
	padding-bottom: 50px;
}

.menu-item-detail{
	width: 410px;
}
.menu-item-text{
	padding-left: 34px;
}
.text-2{
	padding-top: 25px;
}
.menu-item-price{
	padding-left: 34px;
	padding-top: 32px;
}
.menu-item-price span{
	color: #be9738;
}
.menu-hr{
	margin-top: 0;
}

/*---------------------
*       blog
*----------------------*/
.blog-item{
	display: flex;
	justify-content: space-between;
}
.blog-article{
	width: 32%;
}
.blog-photo{
	width: 100%;
}
.blog-text{
	font-size: 1.4rem;
	line-height: 1.7;
	color: #595757;
}
.blog-date{
	font-size: 1.2rem;
	line-height: 1.7;
	color: #979393;
}

/*---------------------
*       access
*----------------------*/
.access-block{
	display: flex;
	justify-content: space-between;
}
.gaikan{
	width: 440px;
}
.gaikan-photo{
	width: 100%;
}
.access-detail{
	width: 440px;
}
.address{
	font-size: 1.8rem;
	padding-bottom: 45px;
}
.traffic{
	font-size: 1.8rem;
	line-height: 2;
}
.map{
	width: 590px;
	margin: 0 auto;
	margin-top: 30px;
}
.fas.fa-map-marker-alt{
	padding-left: 10px;
}

/*---------------------
*       Q & A
---------------------*/
.faq-box{
	max-width: 870px;
}
.faq-q{
	display: flex;
	margin-bottom: 20px;
}
.faq-a{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: dotted 1px #be9738;
}
.faq-inner{
	display: flex;
}

.faq-box dt{
	font-family: 'Lato', sans-serif;
	background-color: #be9738;
	width: 30px;
	height: 30px;
	text-align: center;
	color: #FFF;
	margin-right: 20px;
	display: inline-block;
}
.faq-a dt{
	background-color: #f0b253;
}
.faq-a dd{
	width: calc(100% - 50px);
}/*左アイコンとpadding値を引いたて、固定幅100%にする設定。flexの際にたまに使う*/
.faq-q dd{
	width: calc(100% - 50px);
}
.faq-letter-link{
	color: #be9738;
	font-weight: bold;
}

/*---------------------
*       form
*----------------------*/
.form{
	max-width: 960px;
	height: 562px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	border:1px solid #87775c;
	box-sizing: border-box;
	padding: 0 50px;
	margin-bottom: 150px;
}

.form-block{
	display: flex;
	justify-content: space-between;
}
.form-parts{
	-webkit-appearance:none;
	appearance:none;
	width: 280px;
	padding-top: 40px;
	border-radius: 0;
}
.form-block p{
	color: #87775c;
	line-height: 2;
	padding-top: 28px;
}
.hissu{
	font-size: 1.2rem;
	padding-left: 5px;
}

input[type="text"] ,[type="email"],[type="tel"]{
	width: 100%;
	height:25px;
	border: 1px solid #87775c;
}
.form-massage{
	width:550px;
	padding-top: 30px;
}
textarea{
	width: 100%;
	height: 320px;
	border: 1px solid #87775c;
	}
input[type="submit"]{
	background: #be9738;
	border: none;
	width: 234px;
	height: 48px;
	padding-left: 50px;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 40px;
	margin-top: 50px;
	-webkit-appearance: none;
	border-radius: 0;
}

/*---------------------
*       footer
*----------------------*/
.footer{
	margin-top: 160px;
	max-width: 1200px;
	margin: 0 auto;
}
.fas.fa-chevron-up{
	text-align: center;
	display: block;
	font-size: 3.0rem;
	color: #f0b253;
}
.footer-border{
	border-style: solid 1px;
	border-color: #87775c;
}
.footer-item{
	display: flex;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 10px;
}
.footer-item-block{
	font-size: 1.2rem;
	color: #87775c;
}
.footer-item-block.policy{
	margin-right: 130px;
	line-height: 2.5;
}
.footer-item-block.shop-info{
	margin-right: 130px;
	line-height: 2;
}
.footer-item-block.shop-link{
	line-height: 2.5;
}
.footer-sns{
	text-align: center;
	margin-bottom: 30px;
}
.footer-sns .fab.fa-instagram{
	font-size: 2rem;
	color: #87775c;
	margin-right: 30px;
}
.footer-sns .fab.fa-facebook-square{
	font-size: 2rem;
	color: #87775c;
}
.copyright{
	max-width: 1200px;
	display:block;
	font-size: 1.2rem;
	color: #87775c;
	text-align: right;
}
.footer a{
		color: #87775c;
	}

/*---------------------
*       instagram
*----------------------*/
.instagram h2{
	width: 100%;
	font-size: 1.6rem;
	color:#87775c;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	text-align: center;
	padding: 15px 0;
	margin: 0 auto;
	background-color: #eee0b5;
	text-shadow: 1px 1px 0 #FFF;
}
.follow-insta-icon{
	font-size: 1.8rem;
	padding-left: 15px;
}
.insta-photo{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.insta-photo img{
	width: 16.66%;
}
.instagram a{
	color: #5f513a;
}

/*---------------------
*       letter
*----------------------*/
.letter-header{
	width: 1200px;
	display: flex;
	margin: 0 auto;
	padding-top: 80px;
}
.letter-header-photo{
	padding-right: 66px;
}
.letter-title{
	font-size: 3.6rem;
	font-weight: 700;
	margin-top: 60px;
}
.letter-title-en{
	display: block;
	font-size: 4.8rem;
	font-weight: 700;
	color:#f0b253;
	padding-top: 10px;
	margin-bottom: 50px;
}
.letter-header-text{
	line-height: 2.5;
	padding-bottom: 20px;
}

/*concept story*/
.concept-lead{
	margin-top: 60px;
}
.concept-lead p{
 	padding-bottom: 20px;
	line-height: 2;
}
.concept-story{
	width: 960px;
	margin: 0 auto;
	color: #87775c;
	font-size: 1.8rem;
	line-height: 2;
	background-color: #f8f1db;
	padding-bottom: 55px;
}
.tomoshibi-logo120{
	width: 120px;
	padding-top: 25px;
	padding-bottom: 40px;
}
.concept-title1{
	font-size: 2.2rem;
	font-weight: bold;
	padding-top: 40px;
}
.concept-title2{
	font-size: 4.8rem;
	font-weight: bold;
	color: #f0b253;
	margin-bottom: 30px;
}
.concept-title3{
	color: #f0b253;
	font-size: 2.2rem;
}
.concept-line{
	width: 700px;
	margin: 0 auto;
	margin-bottom: 30px;
}
.concept-text p{
	margin-top: 30px;
}
.concept-text-bold{
	font-size:2rem;
	font-weight: bold;
}
.tomoshibi-post-en{
	font-size: 4rem;
	font-weight: bold;
	color: #f0b253;
}
.tomoshibi-post-ja{
	font-weight: bold;
	color: #87775c;
}
.illust1{
	width: 150px;
}
.illust2{
	width: 200px;
}
.illust4{
	width: 200px;
}
.illust3{
	width: 700px;
	padding-top: 30px;
}
.concept-text-after{
	margin-top: 30px;
	margin-bottom: 120px;
	line-height: 2.25;
}
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	cursor: pointer;
	text-align: center;
}
.cp_box label:after {
	position: absolute;
	z-index: 2;
	width: 16rem;
	content: ' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 10px;
	background-color:#f0b253 ;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 550px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	display: none;
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	transition: all 0.5s;
}

/*how to*/
.howto{
	display: flex;
	width: 800px;
	margin: 0 auto;
}
.howto-photo1{
	padding-bottom: 70px;
}
.howto-line{
	padding: 0 40px;
}
.howto-orange{
	border-radius: 0px;
	background-color: #be9738;
	width: 800px;
	height: 36px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.howto-title{
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	padding-top: 8px;
}
.howto-text1{
	margin-bottom: 38px;
}
.howto-text2{
	margin-top: 150px;
}
.post-recommend{
	margin-top: 70px;
}
.post-recommend p{
	line-height: 2.25;
}
.tomoshibi-logo215{
	width: 215px;
	padding: 0 15px 15px;
	border: solid 2px #f0b253;
	margin-top: 20px;
	margin-bottom: 137px;
}
.tomoshibi-logo215:hover{
	background-color: #f0b253;
	transition: all 1s;
}

/*letters*/
.real-letter{
	width: 960px;
	margin: 0 auto;
}
.real-letter h2{
	font-size: 4rem;
	font-weight: bold;
	color: #f0b253;
	margin-bottom: 50px;
}
.h2-1{
	font-size: 3rem;
	font-weight: bold;
	color: #87775c;
}
.real-letter-block{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 960px;
	margin: 0 auto;
}	
.letter-lead-photo{
	position: relative;
	z-index: 10;
}
.letter-lead-text{
	width: 410px;
	position: absolute;
	z-index: 20;
	padding-top: 30px;
	padding-left: 15px;
}
.letter-item{
	width: 440px;
	box-sizing: border-box;
	background-color: rgba(248,241,219,1);
	padding: 0 50px;
	margin-bottom: 50px;
}
.letter-item h3{
	padding-top: 30px;
	padding-bottom: 20px;
}
.cp_container-letter p{
	padding-bottom: 15px;
}
.letter-item *, .letter-item *:before, .letter-item *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.letter-item {
	position: relative;
}
.letter-item label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 340px;
	height: 140px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(248,241,219,0) 0%, rgba(248,241,219, 0.95) 90%);
}
.letter-item input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}

.letter-item label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 16rem;
	font-family: FontAwesome;
	content: '\f13a'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 10px;
	background-color:#f0b253;
}

.letter-item input {
	display: none;
}
.letter-item .cp_container-letter {
	overflow: hidden;
	height: 380px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.letter-item input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.letter-item input:checked + label:after {
	font-family: FontAwesome;
	content: '\f139'' 閉じる';
}
.letter-item input:checked ~ .cp_container-letter {
	height: auto;
	padding-bottom:120px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
.cp_container-letter h3{
	font-size: 1.8rem;
	font-weight: bold;
}

@media screen and (max-width:1060px){
	.navigation a{
		font-size: 1.3rem;
	}
	.category{
		display: block;
	}
	.category-item{
		padding-right: 20px;
		padding-top: 20px;
	}
	.nav-sns{
		justify-content: center;
	}
	.sns{
		padding-top: 10px;
		padding-right: 30px;
	}
}


@media screen and (max-width:768px){
	
	main{
		box-sizing: border-box;
		width: 100%;
		padding: 0 20px;
	}
	.pc-img{
		display: none;
	}
	.sp-img{
		display: inline;
	}
	img{
		width: 100%;
	}
	.pc-br{
		display: none;
	}
/*---------------------
* section
*----------------------*/
	.section-title{
		margin-top: 20px;
	}
	.section-title-ja{
		margin-bottom: 50px;
		color: #595757;
	}	

/*---------------------
*          btn
*----------------------*/
	.btn-map{
		margin: 0 auto;
		margin-top: 20px;
	}
	
/*---------------------
*      navigation
*----------------------*/
	.navigation{
		display: none;
		width: 80%;
		height: 120%;
		margin: 0;
		right: 0;
		padding: 30px 0 150px;
		background-color: rgba(255,255,255,0.97);
	}
	.header-inner{
		display: block;
		text-align: center;
	}
	.header-logo-block{
		display: block;
	}
	.header-logo{
		padding: 0;
	}
	.tagline{
		font-size: 1.2rem;
		padding:0;
		padding-top: 10px;
	}
	.category{
		display: block;
		margin-top: 20px;
	}
	.category-list{
		display: block;
	}
	.category-item{
		font-size: 1.8rem;
		font-weight: bold;
		padding-right: 0;
		padding-top: 35px;
	}
	.nav-sns{
		display: flex;
		justify-content: space-between;
		width: 90px;
		margin: 0 auto;
		padding-top: 30px;
	}
	.sns{
		padding-right: 0;
	}
	.fab.fa-instagram{
		font-size: 2.5rem;
		margin-right: 0;
		padding-right: 0
	}
	.fab.fa-facebook-square{
		font-size: 2.5rem;
		padding-right: 0;
	}
	.sp-nav{
		display: inline;
	}
	.sp-header{
		display: flex;
		width: 100%;
		align-items: center;
		padding: 10px 0;
		background-color: #eee0b5;
	}
	.header-logo-small{
		width: 60px;
		padding:0 10px;
	}
	.sp-tagline{
		color: #87775c;
		font-size: 1.2rem;
	}
	
	.btn-trigger{
		-webkit-appearance:none;
		appearance:none;
		position: fixed;
		top:17px;
		right:15px;
		z-index: 1100;
		width: 40px;
		height: 22px;
		border: none;
		background-color: rgb(255,255,255,0);
}
	.btn-trigger span{
		position: absolute;
		display: block;
		width: 28px;
		height: 2px;
		background-color: #87775c;
		transition: all 0.5s;
	}

	.btn-trigger span:first-of-type{
		top: 0;
	}
	.btn-trigger span:nth-of-type(2){
		top: 10px;
	}
	.btn-trigger span:last-of-type{
		bottom: 0;
	}
	.btn-trigger.active span:first-of-type{
		transform: rotate(45deg);
		top:10px;
	}
	.btn-trigger.active span:nth-of-type(2){
		opacity:0;
	}
	.btn-trigger.active span:last-of-type{
		transform: rotate(-45deg);
		bottom:10px;
	}
	
/*---------------------
*      header
*----------------------*/	
	.header{
		width: 100%;
		padding-top: 0;
	}
	.header-block{
		display: block;
		margin: 0;
	}
	.header-title{
		width: 100%;
		height: auto;
	}
	.title-text{
		width: 100%;
		padding-top: 0;
	}
	.title-sp{
		width: 100%;
		height: auto;
	}
	.header-image{
		width:100%;
		height: auto;
	}
	
/*---------------------
*      concept
*----------------------*/
	.concept{
		font-size: 1.6rem;
		margin-left: 0;
		background-size: 80%;
		padding-top: 0;
	}
	.concept-title{
		font-size: 2.2rem;
	}
	.concept.first{
		margin-top: 40px;
	}
	
/*---------------------
*      about
*----------------------*/
	.about-block{
		display: block;
	}
	.about-img-box{
		width: 100%;
		margin: 0;
	}
	.about-img.sp-img{
		margin-bottom: 20px;
	}
	.about-detail{
		width: 100%;
	}
	table{
		width: 100%;
	}
	td{
	font-size: 1.4rem;
	letter-spacing: .10em;
	padding-right:10px;
	padding-left: 10px;
}
.sp-br{
	display: inline;
}

/*---------------------
*     menu
*----------------------*/
	.menu-item{
		margin-top: 20px;
	}
	.menu-item-en{
		font-size: 1.5rem;
		padding-bottom: 40px;
	}
	.menu-item-block{
		display: block;
	}
	.menu-item-detail{
		width: 100%;
	}
	.menu-photo{
		padding-bottom: 10px;
		}
	.menu-hr{
		margin-top: 50px;
	}	
	.menu-item-text{
	padding-left: 0;
	}
	.menu-item-price{
	padding-left: 0px;
	}

/*---------------------
*     blog
*----------------------*/
	.blog-item{
	display: block;
	}
	.blog-article{
	width: 100%;
	padding-bottom: 20px;
}
	
/*---------------------
*     Q & A
*----------------------*/
	.q-a{
		width: 100%;
	}
	.faq-box{
		width: 100%;
	}
	.faq-a{
		display: none;
	}
	.q-a-border{
		width: 100%;
}
	.q-a dl{
		width: 100%;
}
	.a-item-br{
		display: none;
	}
	.faq-q:after{
		content: "\f105";
		font-family: FontAwesome;
		color: #f0b253;
		float: right;
		padding-left: 10px;
	}
	.faq-q.active:after {
    content: "\f107";
		font-family: FontAwesome;
		color: #f0b253;
}
	
/*---------------------
*     access
*----------------------*/	
	
	.access-block{
		display: block;
	}
	.gaikan{
		width: 100%;
	}
	.access-detail{
		width: 100%;
	}
	.address{
		font-size: 1.5rem;
		padding-top: 10px;
		padding-bottom: 35px;
	}
	.traffic{
		font-size: 1.5rem;
		line-height: 2;
		letter-spacing: .10em;
	}
	.map{
		width: 100%;
		margin: 0 auto;
		margin-top: 30px;
	}

/*---------------------
*       form
*----------------------*/
	.form{
		width: 100%;
		height: 700px;
		box-shadow:none;
		border:none;
		padding: 0;
		margin-bottom: 150px;
	}
	.form-block{
		display: block;
	}
	.form-parts{
		width: 100%;
		padding: 0;
	}
	.form-massage{
		width:100%;
	}
	textarea{
		width: 100%;
		height: 280px;
		}

/*---------------------
*       footer
*----------------------*/
	.footer{
		width: 100%;
	}
	.footer-item{
		display: block;
	}
	.fas.fa-chevron-up{
		display: none;
	}
	.footer-logo{
		width:auto;
	}	
	.copyright{
		width: 100%;
		text-align: center;
		padding-bottom: 10px;
	}
	.footer-item-block{
		text-align: center;
		margin: 0;
	}
	.footer-item-block.shop-info{
		margin: 0;
	}
	.footer-item-block.policy{
		margin-top: 20px;
		margin-right: 0;
	}
	.footer-item-block.shop-link{
		margin-top: 20px;			
	}

/*---------------------
*       instagram
*----------------------*/
	.instagram p{
	width: 100%;
	}
	.insta-photo{
		width: 100%;
	}
	.insta-photo img{
		width: 50%;
	}

/*---------------------
*       letterページ
*----------------------*/
	.letter-header{
		display: block;
		width: 100%;
		padding-top: 0;
	}
	.letter-title{
		display: none;
	}
	.letter-header-text{
		padding: 30px 20px;
		box-sizing: border-box;
		line-height: 1.75;
	}
	.letter-header hr{
		width: 300px;
		margin: 0 auto;
	}
	.concept-lead p{
		text-align: left;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.concept-story{
		width: 100%;
		margin-top: 30px;
	}
	.concept-title1{
		font-size: 1.7rem;
	}
	.concept-title-frame{
	width: 150px;
	height: 30px;
	}
	.concept-title2{
		font-size: 3.0rem;
	}
	.concept-title3{
		font-size: 1.4rem;
		line-height: 1.75;
	}
	.concept-line{
		width: 300px;
		margin-bottom: 0;
	}
	.concept-text{
		padding: 0 20px;
		box-sizing: border-box;
		font-size: 1.5rem;
		text-align: left;
	}
	.concept-text-bold{
	font-size:1.8rem;
	text-align: center;
}
	.tomoshibi-post-en{
		font-size: 3.0rem;
	}
	.illust3{
		width: 100%;
	}
	.cp_box label {
		width: 100%;
		left: 0;
	}
	.concept-text-after{
		padding: 0 20px;
		box-sizing: border-box;
		text-align: left;
		margin-bottom: 100px;
	}
	.howto-orange{
		width: 90%;
		margin-bottom: 20px;
	}
	.howto{
		display: block;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.howto-line{
		display: none;
	}
	.howto-photo1{
		width: 100%;
		padding-bottom: 0;
	}
	.howto-text1{
		margin-bottom: 20px;
	}
	.howto-photo2{
		width: 100%;
		padding-top: 40px;
	}
	.howto-text2{
		margin: 0;
	}
	.post-recommend p{
		font-size: 1.5rem;
		padding:0 20px;
		box-sizing: border-box;
	}
	.real-letter{
		width: 100%;
	}
	.real-letter h2{
		font-size: 3.0rem;
		margin-bottom: 20px;
	}
	.h2-1{
		font-size: 2.5rem;
	}
	.real-letter-block{
		display: block;
		width: 100%;
	}
	.letter-lead-photo{
		width: 100%;
	}
	.letter-lead-text{
		width: 100%;
		padding: 40px 30px;
		box-sizing: border-box;
	}
	.letter-item{
		width: 100%;
		padding: 0 30px;
	}
	.letter-item label {
		width: 100%;
		left: 0;
	}

	
}