@charset "utf-8";
@import url('fontello.css');

/*========================================
 基本CSS
========================================*/
/* Parts */
.bold{font-weight:bold;}
.green{color:#2cbf13;}
.yellow{color:#ece400;}
.font18{font-size:18px;}

/* base */
.wide div#containers{min-width:1080px !important;}
.wide div#container{margin:0 !important;}

#layouts{
    background: url(../images/bg_grid.png);
    padding:30px 0;}

div#special_content{
	width:1080px;
    font-size:16px;
    border-bottom: 15px solid #325FAB;
	margin:0 auto;
	overflow:hidden;
    background: #fff;
    box-shadow: 0 0 5px #000;
	position:relative;}

#containers .title_in h1,
#containers .related_products_inner{display:none;}

.title h1{display:none;}


/* SNSボタン位置 */
.float .share {
    position: absolute;
    top: 5px;
    left: 15px;
    height: 32px;
    width: 230px !important;
    z-index: 20;}

/* mainBanner */
.mainBanner{margin-bottom:0}

/* スマホ用catch */
div.note .sp_catch{display: none;}

/*====================
 見出し
====================*/
div.note #main_area h2{
	font-size: 1.5rem;
    text-align: center;
    color: #fff;
    margin-top: -70px;
    height: 40px;
    line-height: 40px;}

div.note h3{
    background: #325FAB;
    color:#fff;
    padding:10px 0;
    margin:20px auto;
    text-align: center;
    font-weight: bold;}

div.note h4{
    width: 90%;
    margin:0 auto;
    padding-bottom:5px;
    border-bottom:3px dotted #ccc;
    text-indent: 0.5en;
    font-size:17px;}

/*====================
 メイン
====================*/

div.note #main_area .detail{
    overflow: hidden;
    width: 95%;
    margin: 40px auto 20px auto;
    font-size:14px;
    line-height: 150%;}

div.note #main_area .detail p.catch{
    color:#325FAB;
    width: 550px;
    margin:0 auto 30px auto;
    border:3px solid #325FAB;
    border-radius: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    background: #fff;
    padding: 10px 0;}

div.note #main_area .detail p.catch br{display: none;}

div.note #main_area .detail ul{
    text-align: center;
    overflow: hidden;
    margin-bottom:20px;}

div.note #main_area .detail ul li{
    background: #ecf1f5;
    margin:0 20px;
    display:inline-block;
    text-align: center;
    width: 260px;
    color:#325FAB;
    font-size: 15px;
    font-weight: bold;
    vertical-align: bottom;
    border-radius: 50%;
    min-height: 260px;}

div.note #main_area .detail ul li p.img{
    margin:35px 0 5px 0;}

div.note p.bnr_link {
    width: 500px;
    height: auto;
    margin: 30px auto 0 auto;}

div.note p.bnr_link img {
    width: 100%;
    height: auto;}

/*====================
  STEP
====================*/

div.note .first {
    text-align: center;
    width: 92%;
    margin: 0 auto;
    font-size: 17px;
    color:#325FAB;
    line-height: 180%;
    font-weight: bold;}

div.note #step .box{
    width: 90%;
    background: #ecf1f5;
    margin: 30px auto;
    border:3px solid #325FAB;
    border-radius: 8px;
    overflow: hidden;
    min-height: 120px;
    position: relative;}

div.note #step .box:not(:last-child):after{
    width: 10px;
    height: 10px;
    position: absolute;
    bottom:0;
    left:300px;
    background: #325FAB;}

div.note #step .box .tit{
    background: #ecf1f5;
    font-size:30px;
    text-align: center;
    color:#325FAB;
    font-weight: bold;
    width: 20%;
    padding:0;
    float:left;}

div.note #step .box .titex{
    background: #ecf1f5;
    font-size:30px;
    text-align: center;
    color:#325FAB;
    font-weight: bold;
    width: 20%;
    padding:10px 0 0 0;
    float:left;}

div.note #step .box .tit p{
    margin:auto !important;}

div.note #step .box .tit span{font-size: 14px;}

div.note #step ul{margin-top:10px;}

div.note #step .box .text{
    width: 74%;
    padding:1% 2%;
    min-height: 100px;
    background: #fff;
    font-size:14px;
    line-height: 140%;
    border-left:3px dashed #325FAB;
    width: calc(76% - 3px);
    float:left;}

div.note #step .box .text > p:first-child{
    font-weight: bold;
    font-size:16px;
    margin:5px 0 10px 0 !important;}

div.note .box .link {
    padding: 0;
    overflow: hidden;
    margin: 10px 0 0 -2px;
    line-height: 150%;}

div.note .box .link > p {display: inline-block;　margin-right: 15px;}
div.note .box .link > p a:hover{text-decoration: underline;}

div.note .box .link i{
    /* margin-top: 2px; */
    vertical-align: baseline;
    color: #325FAB;}

/*====================
  注意事項
====================*/
div.note #attention .box{
    width: 88%;
    margin: 0 auto;
    font-size:14px;
    line-height: 150%;
    padding:10px 1% 30px 1%;}

div.note #attention ul li,
div.note #step ul li{
    text-indent: -1.0em;
    padding-left: 1.0em;
    margin-bottom:5px;}

div.note #attention ul.sub{padding-left:1em;}

div.note #attention .box a{text-decoration: underline;}

/*====================
  BUTTON
====================*/
div.note .btn{
    background: #ff9c0e;
    color:#fff;
    width: 300px;
    box-shadow: 0 5px 0 0 #ddd;
    margin:0px auto 40px auto;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;}

div.note .btn a{
    width: 100%;
    height: 100%;
    color:#fff;
    padding:10px 0 !important;
    display: block;
	text-decoration: none;
    cursor: pointer;}

div.note .btn a:hover{text-decoration: none;}

/*自作ページトップ*/
div.copyright{min-height: 50px;}
div.pagetop{display:none !important;}

#layouts .copyright p.pagetop {
    width: 180px;
    height:auto;
    bottom:10px;
    right: 10px;
    position: absolute;
    display: block;
    transition: bottom 0.5s;}

#layouts .copyright p.pagetop img{
    width: 100%;
    height: auto;}

#layouts .copyright p.pagetop:hover{
    bottom:20px;
    transition: bottom 1.0s;}
    
#layouts .copyright p.pagetop a{
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;}

/*====================
 　▽ スマートフォン ▽
====================*/
#top-wrap{font-size:96%;}

#bread{background: #fff !important;}

section#feature_detail_info,
div.sphone_banner{background: url(../images/bg_grid.png);}

#product-detail-wrap {padding: 0 0 10px 0px !important;}

div.sphone_banner img {
	width:100% !important;
	height:auto !important;}

#top-wrap h2.search-h2{display:none;}
h2.pagetitle{background:#325fab !important; color:#FFF !important; line-height: 150%;}
#top-wrap h2:after{background: none;}
#top-wrap h2{
    width: 100%;
    min-height: auto;
    font-size: 16px;
    line-height: 30px;
    height:30px;
    background-color: #f0f0f0;
    box-sizing: border-box;}

#product-detail-wrap .sp_catch{
    font-weight: bold;
    background: #1A9B04;
    padding:15px;
    font-size:13px;
    line-height: 140%;
    margin-bottom:20px;
    color: #fff;}

#product-detail-wrap .sp_catch span{color:#ECE400;}

/*====================
 見出し
====================*/
#product-detail-wrap #main_area h2{
    text-align: center;
    color: #fff;
    margin:0 auto;
    background: #ff9c0e;
    padding:0 !important;
    height: 40px;
    line-height: 40px;}

#product-detail-wrap h3{
    background: #325FAB;
    color:#fff;
    padding:10px 0;
    font-size: 14px;
    margin:20px auto;
    text-align: center;
    font-weight: bold;}

#product-detail-wrap h4{
    width: 88%;
    margin:0 auto;
    padding-bottom:5px;
    border-bottom:3px dotted #ccc;
    text-indent: 0.5en;
    font-size:14px;}

/*====================
 メイン
====================*/
#product-detail-wrap #main_area .detail{
    overflow: hidden;
    width: 95%;
    margin: 10px auto;
    font-size:14px;
    line-height: 150%;}

#product-detail-wrap #main_area .detail p.catch{
    color:#325FAB;
    width: 97%;
    margin:0 auto 10px auto;
    border:2px solid #325FAB;
    border-radius: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    line-height: 140% !important;
    background: #fff;
    padding: 3px 0;}

#product-detail-wrap #main_area .detail ul{}

#product-detail-wrap #main_area .detail ul li{
    background: #ecf1f5;
    width: 91%;
    color:#325FAB;
    padding: 0 2% 1% 2%;
    font-weight: bold;
    border-radius: 10px solid #325FAB;
    margin:10px auto;}

#product-detail-wrap #main_area .detail ul p.img{height: 50px; text-align: center;}
#product-detail-wrap #main_area .detail ul p.img img{height: 100%; width: auto;}
#product-detail-wrap #main_area .detail ul li br{display: none;}

#product-detail-wrap #main_area .detail ul + p{font-size:13px; line-height: 140% !important;}

#product-detail-wrap p.bnr_link {
    width: 95%;
    height: auto;
    margin: 25px auto 0 auto;}

#product-detail-wrap p.bnr_link img {
    width: 100%;
    height: auto;}

/*====================
  STEP
====================*/

#product-detail-wrap .first {
    width: 92%;
    margin: 0 auto;
    font-size: 15px;
    color: #325FAB;
    font-weight: bold;}

#product-detail-wrap .first p{line-height: 160% !important}

#product-detail-wrap #step .box{
    width: 90%;
    background: #ecf1f5;
    margin: 20px auto;
    border:3px solid #325FAB;
    border-radius: 8px;
    overflow: hidden;
    position: relative;}

#product-detail-wrap #step .box:not(:last-child):after{
    width: 10px;
    height: 10px;
    position: absolute;
    bottom:0;
    left:300px;
    background: #325FAB;}

#product-detail-wrap #step .box .tit{
    background: #ecf1f5;
    font-size:30px;
    text-align: center;
    color:#325FAB;
    font-weight: bold;
    width: 20%;
    float:left;}

#product-detail-wrap #step .box .tit p{}

#product-detail-wrap #step .box .tit span{font-size: 14px;}

#product-detail-wrap #step .box .text{
    width: 74%;
    padding:1% 2%;
    background: #fff;
    font-size:14px;
    border-left:3px dashed #325FAB;
    width: calc(76% - 3px);
    float:left;}

#product-detail-wrap #step .box .text > p:first-child{
    font-weight: bold;
    font-size:16px;
    margin:5px 0 10px 0 !important;}

#product-detail-wrap .box .link {
    padding: 0;
    margin: 10px 0 0 -2px;
    line-height: 150%;}

#product-detail-wrap .box .link i{
    margin-top: 2px;
    color: #325FAB;}


/*====================
  注意事項
====================*/
#product-detail-wrap  #attention .box{
    width: 95%;
    margin: 0 auto;
    font-size:13px;
    line-height: 140%;
    padding:10px 1% 30px 1%;}

#product-detail-wrap #attention ul li,
#product-detail-wrap #step ul li{
    text-indent: -1.0em;
    padding-left: 1.0em;
    margin-bottom:5px;}

#product-detail-wrap #attention ul.sub{padding-left:1em;}

#product-detail-wrap #attention .box a{text-decoration: underline;}

/*====================
  BUTTON
====================*/
#product-detail-wrap .btn{
    background: #ff9c0e;
    color:#fff;
    width: 90%;
    box-shadow: 0 5px 0 0 #ddd;
    margin:20px auto;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;}

#product-detail-wrap .btn a{
    width: 100%;
    height: 100%;
    color:#fff;
    padding:10px 0 !important;
    display: block;
    cursor: pointer;
	font-size:13px;
	text-decoration:none;}


/*友だち追加*/	
#product-detail-wrap .method03 .btn{
	width:150px;
	margin:15px auto 0 auto;}	

#product-detail-wrap .method03 .btn img{
	width:150px;
	height:auto;}

#feature_copyright .copyright{display: none;}