/* CSS Document */

 * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}
body{ padding:0; margin:0; color: #333333; position: relative;line-height:180%; font-size:14px; background:url(https://sarashi.mmi-g.com/images/body_bg.jpg) repeat}
ul,dl,dd{ list-style:none;margin: 0px;padding: 0px;}
a{ text-decoration:none; display:block;-webkit-transition: all .5s;	transition: all .5s;}
img{width:100%; max-width:100%; height:auto}
#outline{ max-width:962px; margin-left:auto; margin-right:auto; display:table; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background-color:#FFFFFF}
.wrap{ margin-bottom:50px; width:100%; line-height:2em; font-size:12px; position: relative}
#slide_menu{ min-width:240px; width:25%; display:table-cell; vertical-align:top ;}
#contents{display:table-cell; width:75%;vertical-align:top ; padding:40px 36px }
#header{ max-width:960px; margin-left:auto; margin-right:auto;  position: relative;border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;background-color:#FFFFFF; background-image:url(../images/noren.jpg);background-repeat: no-repeat; background-position:right top}
#rogo { padding:8px 8px 0}
#rogo img {width:110px}
#rogo img.kisetu{ position:absolute; right:0; top:0; z-index:5; width:222px}
#footer{max-width:960px; margin-left:auto; margin-right:auto;  position: relative;border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;background-color:#FFFFFF; }
h1{ font-size:14px; font-weight:normal; margin:0}
.wrap h2{ font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";  position:relative;font-size:26px; margin-top:0}
.nomal{ font-weight:normal}
.red{ color:#FF0000; font-weight:bold}
.color{ color:#345587}

.top{ text-align:right}
.item a,a.order{box-shadow:0 0 10px rgba(189, 190, 191,.5);
-webkit-box-shadow:0 0 10px rgba(189, 190, 191,.5);
-moz-box-shadow:0 0 10px rgba(189, 190, 191,.5); line-height:40px; height:40px;  text-align:center; color: #666666}
.item a{ position: absolute; bottom:-18px; max-width:384px; width:95%; border:1px solid #CCCCCC}
a.order{ background-color:#AD1457; position: relative; width:205px; font-size:15px;
margin-left:auto; margin-right:0; margin-top:16px; color: #FFF;}
.item_info a.order{ margin-top:0; margin-bottom:16px}
h2 a.order{top:-32px; font-weight:normal; margin-top:0}
.item a:hover, a.order:hover{box-shadow: 0 5px 15px rgba(189, 190, 191,.8)}
.item a.tenuguicheck{ color:#FFFFFF; background-color:#999}
#navi a:hover{box-shadow: 0 0 10px rgba(189, 190, 191,.5)}
a.small{ font-size:12px; line-height:3em; height:3em}
@media only screen and (max-width: 940px) {
#outline,#header,#footer{ border:0}
#contents{ width:100%}
.kisetu{ display:none}
#header{ background-image:none}
.header_inner{ margin:0}
#rogo{ padding:8px}
body{ background: #FFFFFF}
}

@media only screen and (max-width: 650px){
h2 a.order{top:8px}
.sp{ display:none}

}
@media only screen and (max-width: 480px) {
#contents{ padding:16px 8px }
.wrap  h2{ font-size:24px}
}



.header_inner{ background:url(../images/top_bg.jpg); width:100%;padding:30px 0; margin:45px 0 0; }
.h_index{padding:45px 0; position:relative; width:100%; background:url(../images/top_bg04.jpg) no-repeat; background-size:cover;}
.header_innerh2{ margin-top:42px}
.h_index div{ background-color:rgba(255,255,255,0.8); padding:16px;  position:relative; left:50%; width:50%; }

.header_inner h2,.h_index h2{font-size:24px;font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";color:#FFFFFF; padding-left:20px }
.h_index h2,.h_index p{ position:relative; left:0;margin-left:auto;
color: #333333; padding-left:20px}
.header_inner img{  position: absolute; left:40%; width:55%; top:50px;}
.header_inner p{ font-size:16px}
@media only screen and (max-width: 940px) {
.header_innertenugui,.header_innerh2,.header_inner{ margin:0; }

}


@media only screen and (max-width: 760px) {
.header_inner{ padding:20px}
.h_index div{ width:100%; left:auto; right:auto; text-align:center;padding:8px;}
.h_index h2,.h_index p{ padding:0}
.h_index p{ font-size:12px}
.header_inner h2{ font-size:20px}
}


.wrap_inner{ display:table; margin-top:-32px}
.item{ display:table-cell; padding:8px 8px 24px;width:384px; position:relative;}
.wrap dl.topic{ margin:40px 0; font-weight:bold}
.wrap dl.topic > dt{ line-height:2.5em}
.wrap p, .wrap dl{ position:relative; z-index:2}
.wrap_bg{ position:absolute; right:0; left:auto; z-index:1; width:80%; opacity:0.7}
.wrap div.alignright img{ width:300px; margin-left:16px}
@media only screen and (max-width: 940px) {
.wrap dl:not(.indent){ font-size:125%}
}
@media only screen and (max-width: 700px) {
.wrap dl.indent{ font-size:125%}
}
@media only screen and (max-width: 650px){

.wrap_inner{ margin-top:0}
}

.item_info,.slide{ display:inline-block; width:48%; vertical-align:top}
.indent dt{ padding-left:1em; font-weight:bold}
.indent dd{ padding-left:3em; margin-bottom:8px}
.item_info > .sideBox{ padding:16px; margin:16px 0 0}

.boxbg li, .point li{ padding-left:1em}
.boxbg li, .point li{ text-indent:-1em}
.point{ font-size:10px; line-height:1.5em; margin-top:16px}
.boxbg li span.color{ border-bottom:1px solid #345587; display:block; width:100%; padding-left:1em; margin:16px 0 8px; margin-left:-1em;}

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

.item_info,.slide{ display:block; width:100%}
.slide{ width:80%; margin-left:auto; margin-right:auto}
.indent dt{ padding-left:0}
.indent dd{ padding-left:1em}
.item_info{ margin-top:16px}
} 
@media only screen and (max-width: 480px) {
.slide{ width:95%; }


}
.t2{	width: 100%;
	text-align: center;
	border-collapse:collapse;
	border: 1px solid #000066;
}
.t2 th,.t2 td{border: 1px solid #000066}
.t2 th {
	background-color: #000066;
	color: #FFF;
	padding: 2px;
}
.t2 td {margin: 0px; text-align:left}
.t3{width: 100%;text-align: center;border-collapse:collapse;margin-bottom:40px; letter-spacing:0.1em;border: 1px solid #000066; }
.t3 th{background-color: #000066;color: #E4E4E4;padding: 2px;}
.t3 td{margin: 0px;border-right: 1px solid #000066}
.t3 td:first-of-type{ text-align:left}
.t3_border td{border-bottom:1px solid #000066}
.t3_border th{border-bottom: 1px solid #FFFFFF;}
.cut th{ background:#FFFFFF; color:#333333}
.cut caption{ text-align:left; font-weight:bold}
th.cm{background-color: #000066;
		color: #FFF;
}
img.company{ width:210px}

#footer { text-align:center; font-size:12px;  background:url(https://sarashi.mmi-g.com/images/line.jpg) top center no-repeat; background-color:#FFFFFF; padding:30px 16px 0}
#footer a{ display:inline}
#footer ul{ text-align:left}
#footer li{display:inline-block; }
#footer li a{ padding:0 8px; margin:8px;border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; color:#666666}
#footer img{ position:relative; margin-left:auto; margin-right:0; width:120px}
#footer p{ color: #666666}

#footer #footer_inner ul{ font-size:10px; text-align:right}
#footer #footer_inner a{ color:#CCCCCC}

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

#footer p{text-align:left}

}

#l_menu{ position:absolute; left:0; right:0; margin:auto; top:62px; width:960px}
#l_menu li{ display:inline-block; width:15%}
#l_menu li a{ line-height:40px; text-align:center; height:40px; color:#333333}
#s_menu { margin-bottom:24px}
#s_menu dt{ background:#000066; color:#FFFFFF; height:40px; line-height:40px; text-align:center; margin-bottom:16px; margin-top:40px}
#s_menu dt.info{ margin-top:16px}
#s_menu dd{ padding:4px 8px}

.sideBox{ background-color: #FBFBFB; border:1px solid #EBEBEB; margin:8px; font-size:10px; line-height:150% }
@media only screen and (max-width: 940px){
.item{ padding:4px 4px 16px;}
#l_menu li a{ line-height:60px;  height:60px;}
}

/*マスクの作り方*/
.making_link{ display:block; text-align:center; background-color:#305097; color:#FFFFFF; padding:16px; margin:16px 0; font-size:24px;border:3px solid #9494b9}
.makingimg{display:flex;max-width:620px;}
.maskmaking{display:flex;max-width:650px;flex-wrap:wrap}
.maskmaking div{ width:50%; padding:4px; font-size:13px}
.makingimg img,.maskmaking div img{align-self:start; max-width:300px}

/*和柄*/
.wagara {display:flex}
.wagara  div:first-child{width:30%; padding:8px}

/*晒
---------------------------------------------------------------------------*/
.minibox {
	width: 50%;
	border-bottom: 1px dashed #E4E4E4;
	margin: 0px;
	padding: 10px 5px 7px 0px;
	float: left;
}
@media (max-width: 700px) {
.minibox { width:100%}
}

.minibox div {
	height: 105px;
}

.miniimg {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	width:100px;
	z-index:2
}
.minibox p, 
.minibox ul li, 
.minibox dd{
	line-height: 1.5em;
}

.minibox dl {
	padding-left: 105px;
}
.minibox dt {
	line-height: 1.7em;
	font-weight: bold;
	background-color: #F3F5FC;
	background-image: url(https://www.mmi-g.co.jp/revitalization/sarashi/images/icon01.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 16px;
}
.but01 .order{ font-size:11px; width:40%; min-width:100px; text-align:center; margin-top:8px; line-height:2em; height:2em}

#sarashi {
	width: 80%;
	text-align: center;
	border-collapse:collapse;
	border: 1px solid #1D1F49;
	background-color:#FFFFFF
}
#sarashi th {
	background-color: #1D1F49;
	color: #E4E4E4;
	padding: 2px;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
#sarashi td {
	margin: 0px;
	border-right: 1px solid #1D1F49;
	border-bottom: 1px solid #1D1F49;
}

#sarashi td ul li{ display:inline-block}
@media (max-width: 960px) {
#sarashi { width:100%}
#sarashi td, #sarashi .t2 th{    width: 100%;
        display: block;}
#sarashi td:nth-child(2n-1) {
 background: #eee;
 padding:5px 0
}

}

/*form
---------------------------------------------------------------------------*/
#form table th{ position:relative; text-align:left; width:160px}
#form table td{ width:auto}
#form table input,#form table TEXTAREA{ padding:8px; width:80%;-webkit-transition: all .3s;
	transition: all .3s;
	border: 1px solid #A7A7A7}
#form table input:focus, #form table TEXTAREA:focus{
	box-shadow: 0 0 4px #51A1EA;
	border: 1px solid #51A1EA;
}
.ate1,.ate2{ position: absolute; right:5px;	padding: 0px 5px;
	color: #fff;border-radius: 5px; font-size:90%;}
.ate1{background-color: #E4509A;}
.ate2{background-color: #ccc;}
.rule {
	width: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

#information ol {list-style-type : decimal-leading-zero;
}
#information {
	padding: 15px;
	width: auto;
	text-align: left;
	border: 1px solid #CCCCCC;
	background-color: #FAFAFA;
	line-height: 1.2;
	margin-bottom: 5px;
	padding-left:40px
}
#information .line {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 110%;
	border-bottom: solid 1px #999999;
}

#form #privacy #leftBox {
	width: 125px;
	float: left;
	font-size: 90%;
	line-height: 1;
}

#form #privacy #leftBox img {
	margin: 0px 25px 25px 0px; 
	width:100px

}

#form #privacy #center {
	float: left;
	width: auto;
}

#form #privacy #rightBox {
	margin-left: 235px;
	padding-top: 10px;
}
#form span img{ width:120px}

@media (max-width: 600px) {
#form #privacy #rightBox { clear:both;margin:0}
#form table input,#form table TEXTAREA{ width:100%;}
#form table th, #form table td{ display:block; text-align:left;}
#form table th{ margin-top:10px; padding:0 0 0 5px; width:auto}
.ate1,.ate2{ right:auto; margin-left:10px}
#information { padding:15px}
}

/*スライドメニュー*/
@media only screen and (max-width: 940px) {
#slide_menu{
    position: fixed;    top: 0;    right: -240px;    width: 240px;
    height: 100%;    background: #FFFFFF;	overflow-y: auto; z-index:10}
#s_manu  dt{ display:block; height:5em; line-height:5em; padding-left:20px; border-bottom:1px solid #FFFFFF; background-color:#EFEFEF; }
#l_menu{ position:static;height:auto; width:100%}
#l_menu  li{ display:block;  width:100% ;}




#wrap{ width:100%}
#tweetBut{ display:inline-block}
/*メニューアイコン　切り替え*/
#menuButton {
    display: block;
    width: 42px;
    height:42px;
    position: fixed;
	background-color:#000066;
    top: 36px;
    right: 10px;
    z-index: 15;
}
#menuButton span {
    display: block;
    background: #FFF;
    width: 24px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menuButton span:first-child {
    top: 12px;
}
#menuButton span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menuButton span:last-child {
    bottom: 12px;
}
#menuButton.active span:first-child {
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}
#menuButton.active span:nth-child(2) {
    opacity: 0;
}
#menuButton.active span:last-child {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);

}
}