@charset "UTF-8";

/*=====================================================
*
*	common.css
*
========================================================*/


/*	style reset
-----------------------------------------------------*/

a { color: #b4920b; }
a:hover { text-decoration: none; }


a {
	/*\*/
   overflow: hidden;
	/**/
}	/* for firefox */


label { cursor: pointer; }

.box{box-sizing:border-box; -moz-box-sizing:border-box; }

/*-----------------------------------------------------*/

/* clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clear { clear: both;}
.cl { clear: left; }
.cr { clear: right; }

.bold{font-weight:bold;}

/* float */
.LeftPos { float: left; }
.RightPos { float: right; }

/* paragraph position */
.right  { text-align: right !important; }
.left   { text-align: left !important; }
.center { text-align: center !important; }

/***********************
全体
***********************/
* html,body { margin:0; width:100%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;}
html,body {width:100%;
	margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:13px;
	line-height:1.4;
	background:#FFF362;}

div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
	line-height:1.4;
}
div,h1, h2, h3, h4, h5, h6, p { display: block; }

ul {
    list-style:none;
}
li img {vertical-align: bottom;}
a { color: #1173ce; }
a:hover { text-decoration: none; }

a {
	/*\*/
   overflow: hidden;
	/**/
}	/* for firefox */

img {
    vertical-align: bottom;
}
img, abbr, acronym, fieldset {
    border: 0 none;
}

#container{background-image:url(https://myatt-ec.jp/spongebob/allback.png); position:relative; margin-top:120px;}
#headerbg{position:absolute; width:100%; left:0; top:-100px; height:176px; background-image:url(https://myatt-ec.jp/spongebob/nami.png); z-index:2;}
#header{position:absolute; width:100%; left:0; top:-100px; height:176px; z-index:8;}
#header>div{position:relative; width:1186px; height:176px; margin:0 auto;}
#header>div>div:first-child{position:absolute; width:307px; height:176px; top:0; left:0; background-image:url(https://myatt-ec.jp/spongebob/img/onlineshop.png); background-position:bottom; background-repeat:no-repeat;}
#header>div>ul{width:780px; position:absolute; left:270px; top:0; height:48px; z-index:10;ss}
#header>div>ul li{width:130px; height:48px; float:left;}
#header>div>ul li a{width:120px; height:42px; display:block; padding:5px 3px;}
#header>div>ul li a:hover{transform: rotate(-5deg);}

/*ifIE8*/
#header>div>div.ie8{width:176px; height:176px; position:absolute; top:0; right:0; background-image:url(https://myatt-ec.jp/spongebob/mailmg_back.png); z-index:9;}
#header>div>div.ie8 a{width:176px; height:47px; display:block; position:absolute; bottom:0; right:0; overflow:hidden;}
#header>div>div.ie8 a img{position:relative;}
#header>div>div.ie8 a img:hover{top:-47px;}
/*ifIE8*/

#header>div>#top_bs{width:660px; height:110px; box-sixing:border-box; -moz-box-sixing:border-box; display:block; border:4px solid #00508A; position:absolute; top:56px; right:194px;}
#top_bs a{width:660px; height:110px; box-sixing:border-box; -moz-box-sixing:border-box; display:block;}
#top_bs a img{width:100%;}

/***********************
トップページ　ヘッダ
***********************/
#top_head { width:100%; height:466px; background-image:url(//myatt-ec.jp/spongebob/img/top_header.jpg); background-position:center; position:fixed; z-index:-1; top:0; left:0;}

/***********************
トップページ
***********************/


/*contents *********/
#contents { width:1186px; min-height:100%; padding-top:96px; margin:0 auto; position:relative; }


/***********************
left_contetns
***********************/
#left_contents{ width:215px; float:left; padding:0 4px;}

.search{width:100%; background:#00508A; border-radius:16px; padding:12px 12px; text-align:center;}
.cat_nav{text-align:center;}

.categ_navi li{background:#FFF362; border:2px solid #FFA539; min-height:28px;}
.categ_navi li:hover{background:#FFD700;}
.categ_navi li a{display:block; width:100%; text-align:left; color:#00A4DA; padding-left:4px; font-size:90%; font-weight:bold; text-decoration:none; line-height:25px;}

.push{background:#00508A;}
.push>div{width:92px; height:92px; float:left; margin-bottom:10px;}
.push>div:nth-child(2n){margin-left:9px;}

.push div a,.push div a img{display:block; width:92px; height:92px; position:relative;}
.push div div {padding:8px 8px 0px; width:76px; height:84px; position:absolute; top:0px; left:0px; z-index:10; background:rgb(100,100,100); background:rgba(0,0,0,0.6); color:#FFF; text-align:center; font-size:10px;}
.push div div img{width:0px; height:0px; display:none;}

.fb{width:160px; margin:5px auto;}
.fb img{width:75px; float:left;}
.fb img:first-child{margin-right:10px;}
.fbtext{font-size:12px; text-align:center; font-weight:bold; color:#333;}
.fblink{display:block; border:3px solid #445999; background:#445999; color:#FFF; font-weight:bold; padding:4px 0; text-align:center; font-size:12px;}
.fblink:hover{background:#FFF; color:#445999;}

a.official:hover{opacity:0.8;}

/***********************
main_contents
***********************/
#main_contents { width:740px; float:left; padding:0 14px 0 10px;}


.list_txt { width:690px; margin:0 auto 0 auto; padding:12px 0 3px 0;}

/***********************
right_contents
***********************/
#right_contents{ width:191px; float:left;}

.info {background:#00508A; border-bottom-right-radius:25px; padding:8px;  color:#FFF;}
.info>img{display:block; margin:auto;}
.info>div{border-top:1px dashed #FFF; padding:8px 4px;}
.info>div p{font-size:85%; line-height:1.2em;}
.info>div span{font-size:80%; color:#FF3;}
.info a{color:yellow;}

/*checked*/
#right_contents .check_box {height:264px; background:#00508A; padding:10px 0;}
#right_contents .check_contents {width:170px; height:264px; margin:0px auto 0; position:relative; overflow:hidden;}
#right_contents .check_contents .checkwrap {width:170px; position:relative;}
#right_contents .check_contents ul {width:170px; position:relative;}
#right_contents .check_contents ul li {width:120px; height:120px; margin:8px auto; background-color:#E7EDD2; position:relative;}
#right_contents .check_contents ul li img {width:120px; height:120px;}
#right_contents .check_contents ul li div { padding:16px 8px; width:104px; height:88px; position:absolute; top:0px; left:0px; z-index:10; background:rgb(100,100,100); background:rgba(0,0,0,0.6); color:#FFF; text-align:center; font-size:10px;}
#right_contents .check_contents ul li div img{width:0px; height:0px; display:none;}


.pickup{background:#00508A; padding:10px 10px 0;}
.pickup div{width:100%; padding-bottom:10px; margin-top:10px; border-bottom:1px solid #FFF;}
.pickup div:first-child{margin-top:0;}
.pickup div:last-child{border:none;}

.pickup a{display:block;}
.pickup a img{display:block; width:100%;}



/***********************
ご利用ガイド
***********************/
#footer {clear: both; margin-top:48px; width: 100%; background-image:url("https://myatt-ec.jp/spongebob/footer_back.png"); background-repeat:repeat-x; background-position:top;min-height:300px; }

.guide_box { width:1173px; margin:auto; position:relative;}
/*.guide_box>div:first-child{position:absolute; top:-42px; left:12px;}*/
.guide_contents { width:1173px;  min-height:445px; max-height:100%; background:rgb(0,40,70); background:rgba(0,40,70,0.5); font-size:11px; color:#FFF; margin-top:0; display:block; padding:12px; border-radius:24px; }

/*
.guide_contents ul.guide_txt { width:1155px; margin:0 auto; display:block; padding:10px 0;}
.guide_contents ul.guide_txt li { width:278px; float:left; padding:0px 5px; line-height:1.7em;}
.guide_contents ul.guide_txt li strong{ font-size:14px; color:#FF0;}
.guide_contents ul.guide_txt li span{ font-weight:bold;}


.guide_contents ul.guide_txt li.bd_none {padding-right:0;} 
.guide_contents ul.guide_txt li a{color:#A2FFFF;}
*/

ul.guide_txt{display: flex;justify-content:center;}
ul.guide_txt li{
  color:#fff;
  padding-left: 1em;
  padding-right: 1em;
}
ul.guide_txt li a{color:#fff;  line-height:2em;}
.guide_box .foot { padding:10px 15px; color:#fff; font-size:12px; margin-top:10px; }

.guide_box .foot .f_left { float:left;}
.guide_box .foot .f_right {float:right; text-align:right;}
.guide_box .foot  a {color:#FFF; }
.guide_box .foot .f_right a {display:block; width:340px; background:#FFD700; padding:8px 0px; text-align:center; border-radius:12px;}
.guide_box .foot .f_right a:hover{background:#EC6C00;}


/***********************
フリーページ
***********************/
#free_page{border:6px solid #00508A; padding:12px; background:#FFF; border-radius:12px; position:relative;}
#free_page > h1{display:block; background:#00508A; color:#FFF; font-size:16px; padding:4px 6px; width:716px; position:relative; left:-12px; margin-bottom:12px;}
#free_page>strong{display:block; border-bottom:3px double #00508A; border-top:3px double #00508A; color:#00508A; font-size:14px; padding:4px 6px; width:716px; position:relative; left:-12px; margin:12px 0;}


/* margin padding */
.mp0 { margin: 0 !important; padding: 0 !important; }


.mauto { margin: auto !important; }

.m10 { margin: 10px !important; }
.m20 { margin: 20px !important; }

.mt0  { margin-top: 0 !important; }
.mt5  { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }

.mr0  { margin-right: 0 !important;  }
.mr5  { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }

.ml0  { margin-left: 0 !important; }
.ml5  { margin-left: 10px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important;}

.mb0  { margin-bottom: 0 !important; }
.mb5  { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }

.p10  { padding: 10px !important; }
.p20  { padding: 20px !important; }

.pt1  { padding-top: 1px !important;  }
.pt3  { padding-top: 3px !important;  }
.pt5  { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt50 { padding-top: 50px !important; }

.pl1  { padding-left: 1px !important; }
.pl5  { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl32 { padding-left: 32px !important; }

.pr1  { padding-right: 1px !important; }
.pr5  { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }


.pb1  { padding-bottom: 1px !important; }
.pb5  { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
#free_page>iframe {border: none;height:200px!important}
.info-tel{border: #e72410 2px solid;padding: 1.5em;margin-left:auto;margin-right: auto;text-align: center;display: inline-block;font-size: 1.2em;
    line-height: 1.6;}		
.list-kome { margin-left: 1em;}
.list-kome li {
  list-style: none;
  position: relative;
}

.list-kome li::before {
  content: '*';
	margin-left: -1em;
	color: #e72410;
	padding-right: .2em;
}
		
.size-L {
    font-size: 1.2em;
}
.txt--md {
    font-size: 12px;
}
.bold{font-weight: 600;}

.mt-m{ margin-top:1em;}
ul.disc{ margin:.5em 0 0 0;}
ul.disc li {
	position: relative;
	margin-left: 1em;
	margin-bottom: 0.5em;

}
ul.disc li:last-child {
	margin-bottom: 0;
}
ul.disc > li::before {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: 3px;
	height: 3px;
	background-color: #666;
	border-radius: 100%;
	margin-left:-.7em;
}