/**********************************************************************　スマホ　*******************************************************************************/

body { margin: 50px 0 0 0;} /* 白ふちのないデザイン */
.pc ,.sitemap,.anch
{display: none;}

/**********************************************************************　デザイン　*******************************************************************************/

.id-box { padding-top: 30px; }
.bgph { background-size: auto 100%; background-position: center center }

.item01 { width: 90%; top: 400px;right: 0% }
.item02 { width: 86%;top: 0;left: 7% }
.item03 { width: 40%;margin-left: 60% } .item03 img { width: 100%;height: auto; }

.tray { margin-bottom: 10px; width: 95% }

/**********************************************************************　画像サイズの調整　*******************************************************************************/

.phj.face img { width: 80%; height: auto ;padding: 10px 10%}
.phj.shoshitai img { width: 50%; height: auto;padding: 30px 25% }

.p-wide-90p { width: 80%;margin-right: 15%;margin-left: 5% }
.w-wide .p-wide-90p { width: 80%;margin-left:10% }
.p-wide-80p { width: 70%;margin-right: 23%;margin-left: 12% }
.p-wide-70p { width: 60%;margin-right: 33%;margin-left: 17% }

/**********************************************************************　背景写真ボックス　*******************************************************************************/

#photobg { background-size: auto 100% }
#body01 #photobg { background-size: 50% auto;background-position: center bottom; padding-bottom: 450px }


/**********************************************************************　タイポグラフィー　*******************************************************************************/

h1 ,.h1like {font-size: 1.4em;line-height: 1.2em}
h2 ,.h2like {font-size: 1.3em;line-height: 1.3em}
h3 ,.h3like {font-size: 1.2em;line-height: 1.4em}
h4 ,.h4like {font-size: 1.0em;line-height: 1.2em}

span.spkaig { display: block; }
span.maru { padding-left: 0.4em }
.read { text-align: justify; padding-left: 5%;padding-right: 5%; }

/**********************************************************************　サイズの調整　*******************************************************************************/

honbun { width: 95%;padding-right: 5% }

/*
.txt-box { margin-left: 30px; margin-right: 30px }
*/

/***********************************************************************　固定ヘッダー　******************************************************************************/

header { border-bottom: solid 1px #ccc }    /*ヘッダーの下の隙間を埋める*/
header {padding: 15px 0 0 0;height:35px;}

section { margin-top: 50px }

/************************* 　ロゴ　***************************/

.logol { top: 10px ; left: 10px ; height: 30px; } /*　今回はサイズ固定　*/
.logom { width: 60%;margin-left: auto ; margin-right: auto; }
.h1box .logom { width: 50%;margin-left: auto ; margin-right: auto; }

.logos { height: 40%;}
.logos img{ height: 80%;width: auto; }

/******************************************************************** photos（スライドショー大きい画面） ************************************************************************/

#photos{ margin: 0 0 0 0; }
#photosub{ width: 100%; height:300px;background-size: auto 100%;background-position: center center;padding: 0px 0;margin: 0 0 0 0; }

#photos .swiper-pagination{ height: 80px;top: 420px;left: 0; }
#photos .swiper-pagination-bullet { width: 10px;height: 10px;margin: 0 10px; }

#myVideo {  }

/***********************************************************************footer******************************************************************************/

.logof a { display: block; text-align: center; padding: 0 0 20px }
.logof img { width: auto; height: 30px;}

#addss  ul li span { display: block ; float: none ; width: 100% }

/**********************************************************************  商品一覧  *******************************************************************************/

.card { width: 94.0%;margin-bottom: 5%;}

.card.card02 { width: 44.5%; margin-right: 5% ;margin-bottom: 5%;}
.card.card06 { width: 30.0%; margin-right: 2.5% ;margin-bottom: 3%;}

.card.card03 { width: 86.0%; margin-right: 0px ;margin-bottom: 20px;}
.card.card04 { width: 99.0%; margin-right: 0px ;margin-bottom: 20px;}
.tray.card04, .tray.card01 { width: 90.0%;  }

.card.card03 img ,.card.card04 img,
.card.card03 a img ,.card.card04 a img
{width: 100%;height: auto; padding-bottom: 0;}

.card.card03 span ,.card.card04 span
{ width: 58%;float: left;padding-left: 10px ;text-align: left }

.card.card03 span.cardp ,.card.card04 span.cardp
{ width: 30%;float: left;padding-right: 10px ; }

.sdan2 .thmbph { width: 46%; margin-left: 2%; margin-right: 2%;margin-bottom: 20px;padding-bottom: 10px }

.tray img{ width: 100%;height: auto; padding-bottom: 0; }

#nagare4 .step { width: 90%; }
#nagare5 .step { width: 90%; }
#nagare3 .step { width: 90%; }
#nagare4 > div { margin-right: 4% }
#nagare3 .step.yajirushigrade img { padding-left: 8% }
#nagare5 .step.yajirushigrade img { padding-left: 8% }





/**********************************************************************  エフェクト  *******************************************************************************/

/**　　　　　左右２列　　　　　　　**//*@import url(effects.css);*//*　その他は　エフェクト参照*/

.zoom-box {  }
.zoom-box:last-child { padding-bottom: 5%; }
.zoom-box::after { content: ''; clear: both; display: block; }
.zoom-box div {
	position: relative;
	width: 47%;
	height: auto;
	padding: 0;
}

/**　　　　　左右３列　　　　　　　**/

.zoom-box.sandan div {
	width: 30%;
}

.zoom-box.yodan div {
	display: none; 
}

.zoom-box div.zb-lft { float: left; }
.zoom-box div.zb-rgt { float: right; }
.zoom-box.sandan div.zb-lft.cntr { margin-left: 5% }

.zoom-box div:first-child { margin-left: 0; }
.zoom-box div span {
	position: absolute;
	text-align: left;
	top: 8%;
	left: 5%;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 1;
}

td span {display: block}


/**********************************************************************　テーブルのようなリスト　*******************************************************************************/

ul.tblike.pref li.thbox {width: 100%;border-bottom: 1px solid #CCCCCC;}
ul.tblike.pref li.tdbox {display: none}

ul.tblike.pref li.tdbox{width: 95%;text-align: left;padding-left: 5%;}
ul.tblike.pref li.tdbox.brn{width: 95%;text-align: left;padding-left: 5%;}
ul.tblike.pref li.tdbox.add{width: 95%;text-align: left;padding-left: 5%;}

ul.tblike li.end{float: none;clear: left;border-bottom: 0px solid #CCCCCC;}
ul.tblike.nidan {border-top: 1px solid #CCCCCC;}
ul.tblike.nidan li.tdbox{width: 100%;}

.kazai { width: 40%; padding: 0 5% ;margin: 10px 0 }

p.codebtn,
.bribt a { width: 80%;height: 40px;padding: 10px 0 0 0;margin: 20px auto 0 auto; }

header ul li  { padding: 0 }
header ul li a { font-size: 16px;line-height: 16px;padding: 10px 0; }
header ul li.fobt a { background-color: #f1f1f1; }

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

/************************* info ***************************/

dl.toiawase  { border-top-width: 1px;border-top-style: solid;border-top-color: #CCCCCC }
dl.toiawase dt { float: none;padding: 0 0 0 0;margin: 10px 0 0 0 ; }
dl.toiawase dd { float: none;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCCCCC;padding: 0 0 10px 0;margin: 0 0 10px 0; }

dl.toiawase dt.bikou ,dl.toiawase dd.bikou {  }
dl.toiawase dt.clear-box ,dl.toiawase dd.clear-box { float: none; clear: both ;width: 100%  }

dl.toiawase dt{ width: 100% }
dl.toiawase dd{ width: 100% }

dl.toiawase dd input.meru{ width: 60% !important; }
dl.toiawase dd input.nama{ width: 60% !important; }
dl.toiawase dd input.pos{ width: 60% !important; }
dl.toiawase dd input.add{ width: 97% !important; }
dl.toiawase dd textarea.you{ width: 97% !important; }
dl.toiawase dd textarea.you{ height: 100px !important; }

/**********************************************************************　サイズ調整　*******************************************************************************/

/*---------------------　スマホ用　---------------------*/

.h1box h1 { width: 90%;margin-left:5% }
.h1box h2 { width: 90%;margin-left:5% }

.w-wide { width: 90%;margin-left:5% }
.w-wide-fl { width: 85%;margin-left:10%;margin-right:5% }
#byoki .w-wide-fl { width: 95%;margin-left:5%;margin-right:0% }

.w-15p{ width: 15%;margin-left:42.5% }
.w-20p{ width: 20%;margin-left:40% }
.w-70p{ width: 90%;margin-left:5% ; }
.w-80p{ width: 90%;margin-left:5% ; }
.w-95p{ width: 95%;margin-left:2.5% ; }

.pt-ss { padding-top: 5px }.pb-ss { padding-bottom: 5px }
.pt-s { padding-top: 10px }.pb-s { padding-bottom: 10px }
.pt-m { padding-top: 20px }.pb-m { padding-bottom: 20px }
.pt-l { padding-top: 30px }.pb-l { padding-bottom: 30px }
.pt-ll { padding-top: 50px }.pb-ll { padding-bottom: 50px }

.mt-ss { margin-top: 5px }.mb-ss { margin-bottom: 5px }
.mt-s { margin-top: 10px }.mb-s { margin-bottom: 10px }
.mt-m { margin-top: 20px }.mb-m { margin-bottom: 20px }
.mt-l { margin-top: 30px }.mb-l { margin-bottom: 30px }
.mt-ll { margin-top: 50px }.mb-ll { margin-bottom: 50px }

.pr-s { padding-right: 5px }.pl-s { padding-left: 5px }
.pr-m { padding-right: 10px }.pl-m { padding-left: 10px }
.pr-l { padding-right: 15px }.pl-l { padding-left: 15px }
.pr-ll { padding-right: 20px }.pl-ll { padding-left: 20px }

.w-dr{ width: 80%;margin-left:10% }

.lft-s {left: 20px}
.tp-s {top: 20px}