/*========================

　　　LOGO TEMPLATE

========================*/

/* base -------- */
.margin0 {margin:0;}
.mb30 {margin-bottom: 30px;}
#mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}

.mtb10  {margin: 10px 0;}

#logotemplate div,p,span,h1 {font-family: "YuGothic","游ゴシック","ＭＳ ゴシック",sans-serif;}

#cute     {clear: both;}
#cool     {clear: both;}
#luxury   {clear: both;}
#wedding  {clear: both;}
#fonts    {clear: both;}


/* body -------- */
#logotemplate p.lt-text {
   padding: 50px 25px;
   color: #696969;
   font-size: :16px !important;
   line-height: 28px;
   letter-spacing: 2px;
}

.lt-step01 {float:left; position:relative; background: url(/material/product/logotemplate/img/hto01.png); width:193px; height:223px;}
.lt-step02 {float:left; position:relative; background: url(/material/product/logotemplate/img/hto02.png); width:193px; height:223px;}
.lt-step03 {float:left; position:relative; background: url(/material/product/logotemplate/img/hto03.png); width:193px; height:223px;}
.lt-step04 {float:left; position:relative; background: url(/material/product/logotemplate/img/hto04.png); width:193px; height:223px;}

.lts-text01 {position: absolute; top: 160px; left: 40px; width: 120px; color:#404040;}
.lts-text02 {position: absolute; top: 160px; left: 40px; width: 120px; color:#404040;}
.lts-text03 {position: absolute; top: 160px; left: 40px; width: 135px; color:#404040;}
.lts-text04 {position: absolute; top: 160px; left: 40px; width: 135px; color:#404040;}

#plink {text-align:center;}
.plink-btn {float:left; margin:0 10px 10px 0; line-height: 0;}

.lgs-text {clear:both; margin:40px 0; font-size:13px; line-height:20px; padding:0 25px;}
.lgs-text2{font-size:16px;}

.boxs {list-style: none; padding: 0;}
.boxs li {float: left;}

.ef-boxs {list-style: none; padding: 0;}

.plink-gray {margin-left:-20px;}
.plink-gray li {list-style:none; float:left; margin:40px 10px 40px 0;}

.plink-bet ul {
   width: 800px;
   padding: 0;
   display: flex;
}

.plink-bet li {
   width: 132px;
   font-size: 14px;
   line-height: 18px;
   letter-spacing: 1px;
   text-align: center;
   list-style: none;
   border-left: 1px solid #3C3C3C;
   margin: 60px 0;
}

li.Rline {
   border-right: 1px solid #3C3C3C;
}

#logotemplate a:link    { color:#3C3C3C;}
#logotemplate a:visited { color:#3C3C3C;}
#logotemplate a:hover   { color:#4698A6;}
#logotemplate a:active  { color:#3C3C3C;}



@media screen and (max-width: 767px) {

.plink-bet ul{
	width: 100%;
}

.lt-step01, .lt-step02, .lt-step03, .lt-step04{
	width: 50%;
	height: 223px;
}

.lts-text01, .lts-text02, .lts-text03, .lts-text04{
	font-size: 12px;
}

.lts-text03, .lts-text04{
	width: 120px;
}

.plink-btn{
	width: 48%;
	margin: 0 1% 10px !important;
}

.lgs-text{
	padding: 0;
}


.boxs{
	display: flex;
	flex-wrap: wrap;
}

.boxs li{
	float: none;
	width: 50%;
	padding: 1%;
}

.plink-bet{
	margin: 0 0 30px;
}

.plink-bet ul {
	flex-wrap: wrap;
}

.plink-bet li{
	font-size: 12px;
	margin: 0;
	padding: 12px 0;
	width: 50%;
}

.plink-bet li:nth-child(2n){
	border-right: 1px solid #3C3C3C;
}

#popup-frame{
	width: 95% !important;
}

#popup-frame .main_pic{
	width: 100%;
	height: auto;
}

.main_pic{
	width: 100%;
	background-size: contain;
	height: 80vw;
}

.sub_pic{
	float: none;
	width: 100%;
}

.sub_pic > div{
	margin: 0 5px !important;
	float: none !important;
	display: inline-block;
}

.text_box table{
	width: 100%;
}

}