@charset "euc-jp";
@import url("//use.typekit.net/ibt0rdc.css");


/*��IE�Ǥ�Material Iconsɽ����ɬ��*/
body {
    text-rendering: optimizeLegibility;
    font-kerning: normal;               
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
    
}
body,html{
	overflow-x:hidden
}

body{
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

/*===============================
����
===============================*/

#title{
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
#title img {max-width: 100%!important; height: auto;}

#mask{
    width: 900px;
    margin: 0 auto;
    padding: 0;
    font-family: 
        -apple-system, blinkMacSystemFont, /* Mac�β�ʸ��San Francisco (OS X 10.11�ʹ�) */ 
        'Helvetica Neue', /* Mac�β�ʸ (OS X 10.10����) */ 
        'Segoe UI', /* Windows�β�ʸ */ 
        'Hiragino Kaku Gothic ProN', /* Mac�Υҥ饮�� */ 
        Meiryo, /* Windows�Υᥤ�ꥪ */ 
        sans-serif;
    font-weight: normal;
    letter-spacing: 0.05rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

#mask li{
    list-style:none;
    float: left}

#mask a{
	text-decoration:none;
	color:#000;
}
#mask a:visited{color:#000;}

#mask a:hover, #mask a:hover img{opacity:0.8;}

#mask img{
	width:100%;
    vertical-align: bottom;
}

#mask dd,#mask dl,
#mask li,
#mask ul{
    margin:0;
    padding:0;
    overflow: hidden
}
#mask h1,
#mask h2,
#mask h3,
#mask h4,
#title h1{
    margin: 0; 
    padding: 0;
}
#mask dd, 
#mask dd a,
#mask dd a:after{
	 -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}


/*===============================
���IJ�����
===============================*/
#mask h4.title {
    text-align: center;
    font-size: 18px;
    margin: 35px 0 20px;
    color: #333333;
    padding: 0;
    background: #fff;
    font-weight: bold;
    line-height: 33px;
    letter-spacing: 1px;
}


/*===============================
99%���åȥե��륿������
===============================*/
#mask div.cut img{margin:30px 0 50px;}


/*===============================
����ʥ�
===============================*/
#fixed_nav{
    -webkit-transition: all 1s;
    -webkit-transform: translate(0, 0);
    position: fixed;
    z-index: 999;
    display: -webkit-box;
    bottom: 0;
    vertical-align: middle;
    width: 1200px;
}
#fixed_nav nav{
    width: 100%;
    margin-left:-12%;
}

#fixed_nav a{
	justify-content: center;
    display: block;
}
#fixed_nav ul li:hover{opacity: 1;}
#fixed_nav nav .cate{width: 100%;}
#fixed_nav nav .cate li{
    display: inline-block;
    text-align: center;
    width: calc(96%/5);
    background: #00aea4;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    position: relative;
    margin-right: 5px;
    opacity: 0.9;
}
#fixed_nav nav .cate li:last-child{margin-right: 0;}
#fixed_nav nav .cate li:first-child{margin-left: 12px;}
#fixed_nav nav .cate li a{
    color:#fff;
    display: block;
}
#fixed_nav nav .cate li a p{
    padding: 20px 0;
    margin: 0;
}
#fixed_nav nav .cate li:hover{
    background:#e68282;
    -webkit-transition: all 0.3s;
}


/*===============================
�����ƥඦ��
===============================*/

/*����*/
#mask h3{
    font-size: 50px;
    margin: 0 auto 20px;
    width: 100%;
    letter-spacing: 5px;
    color: #4e606c;
    font-family: centuryGB,"Century Gothic",helvetica,Arial,sans-serif;
    text-align: center;
    border-bottom: 1px solid #4e606c;
    border-top: 1px solid #4e606c;
    padding-top: 7px;
}

/*�����ƥ���*/
#mask div.mask_line{
    padding-bottom: 30px;
    margin: 0!important;
    text-align: center;
    overflow: hidden;
    border-top: 0;
    width:100%;
}
#mask div.mask_line .item{
    overflow: hidden;
}
#mask div.mask_line .item ul{
    overflow: hidden;
    margin: 15px auto 30px;
}

#mask div.mask_line .item ul.yupake{
    overflow: hidden;
    margin: 15px auto 0px;
}

#mask div.mask_line .item ul.manyprice{
    overflow: hidden;
    margin: 5px auto 30px;
}

#mask div.mask_line .item ul.cal1 li{
    width: calc(95%/1);
    position: relative;
    margin-right:15px;
}

#mask div.mask_line .item ul.cal2 li{
    width: calc(95%/2);
    position: relative;
    margin-right:15px;
}

#mask div.mask_line .item ul li.manytype{
    margin:0 0 0 30px;
}

#mask div.mask_line .item ul.cal4 li{
    width: calc(95%/4);
    position: relative;
    margin-right: 15px;
}
#mask div.mask_line .item ul.cal4 li:last-child{margin-right: 0;}
#mask div.mask_line .item ul li dt{
    color: #333333;
    font-size: 20px;
    background: #fff;
    padding: 3px 8px;
    border: 1px solid #333333;
    border-radius: 4px;
}
#mask div.mask_line .item ul li dt span.souryou{
    position: absolute;
    background: #e72d2e;
    color: #fff;
    font-weight: bold;
    line-height: 15px;
    padding: 3px 5px;
    font-size: 14px;
    left: 7px;
    border-radius: 5px;
    top: 9px;
}


/*===============================
�������̥ޥ���
===============================*/

/*�����ڤ��ؤ�*/
#mask .tab_container {
  margin: 0 auto;
}
#mask .tab_item {
    width: calc(96%/3);
    margin: 10px 1% 20px 0;
    padding: 20px 0;
    background: #e0e7ea;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    color: #333;
}
#mask .bi{margin-right: 0;}
#mask .no{margin-left: 1%;}

#mask .tab_item:hover {opacity: 0.75;}
#mask .tab_container input[name="tab_item"] {display: none;}
#mask .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content{
  display: block;
}
#mask .tab_container input:checked + .tab_item {color: #fff;}
#mask .tab_container input:checked + .no {background-color: #1d76a0;}
#mask .tab_container input:checked + .ki {background-color: #d6832e;}
#mask .tab_container input:checked + .bi {background-color: #5961bd;}


/*�����ƥ���*/
#mask div.mask_line .item ul.co_2{margin: 0;}
#mask div.mask_line .item ul.co_2 li{
    width: calc(96%/2);
    margin: 0 4% 0 0;
}
#mask div.mask_line .item ul.co_2 li:nth-child(2n){margin-right: 0;}
#mask div.mask_line .item ul.co_2 ul.cal4 li:nth-child(n+3){margin-top: 15px;}


/*�������̸��Ф�*/
#mask h2{
    position: relative;
    text-align: center;
    font-size: 40px;
    padding: 0 65px;
}
#mask h2:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
}
#mask h2 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}

#mask h2.no{color: #1d76a0;}
#mask h2.no:before {background: #1d76a0;}

#mask h2.mi{color: #d3748c;}
#mask h2.mi:before {background: #d3748c;}

#mask h2.ki{color: #d6832e;}
#mask h2.ki:before {background: #d6832e;}

#mask h2.bi{color: #5961bd;}
#mask h2.bi:before {background: #5961bd;}


/* 98�� ���̸��� ����٤������������ */
#mask img.kohousou {
    margin-top:10%;
}


/*===============================
�����̥����ס�������������
===============================*/
/* ���� */
#mask h4{
    width: 80%;
    font-size: 35px;
    font-weight:bold;
    color: #56a6cc;
    margin: 15px auto -15px;
    text-align: center;
    padding: 5px;
    letter-spacing: 7px;
}

#mask h4 {
  display: flex;
  align-items: center; /* ��ľ�濴 */
  justify-content: center; /* ��ʿ�濴 */
}
#mask h4:before, #mask h4:after {
  border-top: 1px solid;
  content: "";
  width: 5em; /* ������ */
}
#mask h4:before {
  margin-right: 1em; /* ʸ���α��� */
}
#mask h4:after {
  margin-left: 1em; /* ʸ���κ��� */
}

/* ������������ */
#mask ul.cal2 li dl dd.kobetu_price{
    width:35%;
    text-align:left;
}

#mask ul.cal2 li dl dd.kobetu_price::after{
    bottom:123px;
    right:50px;
}

#mask ul.cal2 li dl dd.on_price{
    margin-top:15%;
}

#mask ul.cal2 li dl dd.kobetu_price .prdisp-taxin {
    font-size:40px;
}

#mask ul.cal2 li dl img.kobetu{
    width:40%;
    float:left;
    margin-left:10%;
}


/*===============================
��������
===============================*/
#mask div.item_box ul li{
    text-align: left;
    background: #fff;
    width: calc(96%/3);
    position: relative;
    margin-right: 2%;
    border: solid 1px #333333;
    box-sizing: border-box;
}

#mask div.item_box ul li:nth-child(3n){
    margin-right: 0;
}

#mask div.item_box ul li:nth-child(n + 4){
    margin-top:20px;
}

#mask div.item_box ul li dt img{
    margin: 3% 3% 0;
    width: 94%;
}

#mask div.item_box ul li dd{
    margin: 0 10px;
    /*font-weight: bold;*/
}

#mask div.item_box ul li dd.name{
    font-size: 18px;
    line-height: 22px;
    min-height: 26px;
    margin-top: 10px;
    color: #333333;
}


#mask div.item_box ul li dd.icon{
    margin-top: 2px;
    margin-bottom: 5px;
}


#mask div.item_box ul li dd.icon span{
    border-radius: 5px;
    padding: 1px 7px;
    margin-right: 5px;
    color: #fff;
    background: #56a6cc;
    font-size: 15px;
    display: inline-block;
}

#mask div.item_box ul li dd.price{
    position: relative;
    
}

#mask div.item_box ul li dd.price div>span{
    margin-right: 45px;
    margin-bottom: 10px;
    display: block;
}

#mask div.item_box ul li dd.price::after{
    bottom: 5px;
    right: 15px;
}


/*===============================
���ʥץ�����
===============================*/
#mask .price,
#mask .intax{
    vertical-align: baseline;
    display:inline-block;
    font-family: centuryGB,"Century Gothic",helvetica,Arial,sans-serif;
    font-weight:bold;
    color: #e82d2d;
    width: 100%;
    /*text-align: right;*/
}

#mask .manyprice .price{
    width: 900px;
}

#mask .prdisp-price{
    font-size: 35px;
    color: #e82d2d;
}

#mask .division{
    font-size: 20px;
    color: #333333;
    font-weight: normal;
}

#mask .prdisp-price span span{display:none}

#mask dd.price::after{
    content: "navigate_next";
    font-family: "Material Icons";
    display: block;
    position: absolute;
    font-size: 25px;
    bottom: 5px;
    right: 15px;
    margin: auto;
    color: #e82d2d;
}

#mask .cal1 dd.price::after{;
    bottom: 5px;
    right: 300px;
}

#mask dd.price_seat::after{
    bottom: 5px;
}

#mask div.mask_line .item ul li dd.price .division:before{
    content: "1�礢����";
    padding-right: 2px;
    font-size: 70%;
}


#mask .motoprice{display:none;}
#mask .price{ font-size:30px; }
#mask li.price{font-size:28px;}
#mask .buy_price ol{font-size:20px;}
#mask .intax{font-size:11px;margin-left:5px;font-weight:normal;}
#mask .spesicalprice{font-size:12px;color:#626262;display: inline-block;line-height:1;position:relative;text-align:left; margin-right:1em;color: #C00}


/*===============================
�եå���
===============================*/
#mask #footer{
    text-align: center;
    font-size: 14px;
    background: #fff;
    margin: 20px 0 75px 0;
    padding: 20px 0;
    font-weight: normal;
}

#mask #footer a:hover{
    color: #003CFF;
    text-decoration: underline
}

.pc_none{display:none;}