@charset "UTF-8";
/*
----------------------------------------*/
.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    min-height: 1px;
}
html{
    height:100%;
}
body {
}
* html .clearfix {
    height: 1px;
}
body{
    padding:0 !important;
    margin:0 !important;
}
a{
	transition:.2s;
	border:0 !important;
    text-decoration: none !important;
}
a:hover{
}
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}


/*
----------------------------------------*/
#special{
	font-size:16px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	color:#000;
	list-style:none;
	line-height:2.0;
}
#special img{
	vertical-align:top;
	max-width: 100%;
	height: auto;
}
#special a img{
	border:0;
}
#special area{
	border:none; outline:none; 
}
@media screen and (min-width: 1000px){
	#special{
        width:100% !important;
        margin:0 auto !important;
	}
}


/*
----------------------------------------*/
#special .pc{
    display:none;
}
#special .sp{
    display:block;
}
@media screen and (min-width: 1000px){
	#special .pc{
		display: block !important;
	}
	#special .sp{
		display: none !important;
	}
}


.paddingtop50{
    padding-top:50px !important;
}
.mgntop50{
    margin-top:50px;
}
.mgnbtm50{
    margin-bottom:50px;
}

/* btn
----------------------------------------*/
#special .btn{
    background:#fff;
    color:#000 !important;
    width:90%;
    height:50px;
    line-height:50px;
    font-size:1.3em;
    text-align:center;
    font-weight:bold;
    border:1px solid #000 !important;
    margin:0 auto !important;
}
#special .btn span{
    font-size:0.8em !important;
    font-weight:normal !important;
}
@media screen and (min-width: 1000px){
    #special .btn{
        width:400px !important;
        height:50px;
        line-height:50px;
        margin:18px auto 0 auto !important;
        font-size:20px !important;
    }
    #special .btn span{
        font-size:16px;
    }
    #special .btn.headbtn{
        width:250px !important;
        font-size:14px !important;
        margin:0 !important;
        height:30px !important;
        line-height:30px !important;
    }
    #special .btn.headbtn span{
        font-size:12px !important;
    }
    #special a:hover .btn{
        background:#999 !important;
    }
}



/* headerArea
----------------------------------------*/
#headerArea{
    position: fixed;
    background:#000 !important;
    padding:3% 5%;
    text-align:center;
    width:90%;
    height:30px;
    z-index:10000 !important;
}
#headerArea .header .logo{
    width: 20%;
}
@media screen and (min-width: 1000px){
    #headerArea{
        height:100px;
        padding:0 !important;
        width:100%;
        margin:0 auto !important;
        text-align:left;
    }
    #headerArea .header{
        width:1000px;
        margin:0 auto;
        position:relative;
    }
    #headerArea .header .logo{
        position:absolute;
        top:25px;
        left:0;
        width:125px;
    }
    #headerArea .header .right{
        position:absolute;
        top:25px;
        right:0;
        width:250px;
        text-align:center;
    }
    #headerArea .header .right .time{
        font-size:10px;
        color:#fff !important;
        margin-top: 5px !important; 
    }
    #headerArea .header .tel{
        position:absolute;
        top:25px;
        right:270px;
    }
    #headerArea .header .tel .telmain{
        width:190px;
    }
    #headerArea .header .tel .telsub{
        width:170px;
        margin-top:8px;
    }
}

#mainArea{
    width:100%;
    background-image: url("../img/mainbg_sp.jpg");
    background-size:145%;
    text-align:center !important;
    margin-top:40px;
    background-position: center;
    padding-bottom:50px;
}
#mainArea .main1{
    margin-top:30px;
    width:70%;
}
#mainArea .main2{
    margin-top:0;
    width:100%;
}
#mainArea .main3{
    margin-top:0;
    width:90%;
}
#mainArea .main4{
    margin-top:0;
    width:90%;
}
@media screen and (min-width: 1000px){
    #mainArea{
        width:100%;
        background-image: url("../img/mainbg.jpg");
        background-size:125%;
        background-position:center;
        height:600px;
        margin-top:95px !important;
        position:relative;
    }
    #mainArea .main1{
        position:absolute;
        left: 0;
        right: 0;
        margin: auto;
        top:50px;
        width:350px;
    }
    #mainArea .main2{
        position:absolute;
        left: 0;
        right: 0;
        margin: auto;
        top:120px;
        width:900px;
    }
    #mainArea .main3{
        position:absolute;
        left: 0;
        right: 0;
        margin: auto;
        top:220px;
        width:600px;
    }
    #mainArea .main4{
        position:absolute;
        left: 0;
        right: 0;
        margin: auto;
        top:430px;
        width:450px;
    }
}


/* footerArea
----------------------------------------*/
#special .footerArea{
    background:#000;
    padding:10% 5% !important;
    font-size:0.9em!important;
}
#special .footerArea .footerlogo{
    width:50%;
    margin-bottom:10%;
}
#special .footerArea .footercompany{
    color:#fff;
    line-height:2.0em;
}
#special .footerArea .footercompany a{
    color:#fff;
    text-decoration: underline;
}
#special .footerArea .copyright{
	text-align: center;
	font-size: 12px;
    letter-spacing:1px;
    color:#fff;
    line-height:2.0em;
    margin-top:40px !important;
}
 @media screen and (min-width: 1000px){
    #special .footerArea{
        padding-top:50px !important;
        padding-bottom:20px !important;
    }
    #special .footerArea .footer{
        width:500px;
        margin:0 auto !important;
        height:100px;
    }
    #special .footerArea .footerlogo{
        width:125px;
        margin-bottom:0;
        float:left;
    }
    #special .footerArea .footercompany{
        float:right;
        font-size:14px;
    }
    #special .footerArea .copyright{
        text-align: center;
        font-size: 10px;
        margin: 0 auto 30px auto !important;
        letter-spacing:1px;
    }
}


/* aboutArea
----------------------------------------*/
#special .aboutArea{
    padding:5% 0 !important;
    margin:0 !important;
    text-align:center;
    background-color: #e5e4e0;
}
#special .aboutArea .mainttl{
    font-size:1.0em;
    text-align:center;
    padding-top:10%;
    margin-bottom:10%;
}
#special .aboutArea .mainttl img{
    height:50px !important;
    margin-bottom:3%;
}
#special .aboutArea .mainttl hr{
    height:20px;
    width:3px;
    background-color: #000 !important;
    border: 0;
}
#special .aboutArea .aboutlogo{
    width:40%;
    margin:0 auto 10% auto !important;
}
@media screen and (min-width: 1000px){
    #special .aboutArea{
        padding:50px 0 !important;
        width:100% !important;
        margin: 0 auto !important;
    }
    #special .aboutArea .mainttl{
        font-size:16px;
        padding-top:0 !important;
        margin-bottom:20px;
    }
    #special .aboutArea .mainttl hr{
        margin-bottom:20px;
    }
    #special .aboutArea .mainttl img{
        margin-bottom:20px !important;
    }
    #special .aboutArea .aboutlogo{
        width:150px !important;
        margin:20px auto 0 auto !important;
    }
}


/* customizeArea
----------------------------------------*/
#special .customizeArea{
    padding:5% 0 !important;
    margin:0 !important;
    background-image: url("../img/customizebg_sp.jpg") !important;
    background-size: 100%;
    text-align:center;
}
#special .customizeArea .mainttl{
    font-size:1.0em;
    text-align:center;
    padding-top:10%;
    margin-bottom:10%;
    color:#fff;
}
#special .customizeArea .mainttl img{
    height:100px !important;
    margin:0 auto 3% auto !important;
}
#special .customizeArea .mainttl hr{
    height:20px;
    width:3px;
    background-color: #fff !important;
    border: 0;
}
#special .customizeArea ul.lineup{
    color:#fff;
    list-style-type: none;
    text-align:left;
    width:80%;
    margin:0 10%;
    padding:0;
    font-size:0.9em;
}
#special .customizeArea ul.lineup li{
    margin-bottom:10%;
}
#special .customizeArea ul.lineup li img{
    margin-bottom:2%;
}
#special .customizeArea ul.lineup li span{
    font-size:1.5em;
    font-weight:bold;
}
@media screen and (min-width: 1000px){
    #special .customizeArea{
        padding-bottom:30px !important;
        width:100% !important;
        margin: 0 auto !important;
        background-size:100%;
        background-position:center;
        background-image:url("../img/customizebg.jpg") !important;
    }
    #special .customizeArea .mainttl{
        font-size:16px;
        padding-top:0 !important;
        margin-bottom:40px;
    }
    #special .customizeArea .mainttl img{
        height:50px !important;
        margin-bottom:20px !important;
    }
    #special .customizeArea .mainttl hr{
        margin-bottom:20px;
    }
    #special .customizeArea ul.lineup{
        height:450px;
        width:990px;
        margin:0 auto !important;
    }
    #special .customizeArea ul.lineup li{
        width:225px !important;
        float:left;
        margin-right:30px;
    }
    #special .customizeArea ul.lineup li:nth-child(4){
        margin-right:0 !important;
    }
}


/* baseitemsArea
----------------------------------------*/
#special .baseitemsArea{
    padding-bottom:5% !important;
    margin:0 5% !important;
}
#special .baseitemsArea .mainttl{
    font-size:1.0em;
    text-align:center;
    padding-top:10%;
    margin-bottom:5%;
}
#special .baseitemsArea .mainttl img{
    height:50px !important;
    margin-bottom:3%;
}
#special .baseitemsArea .mainttl hr{
    height:20px;
    width:3px;
    background-color: #000 !important;
    border: 0;
}
#special .baseitemsArea ul.itemlineup{
    list-style-type: none;
    width:100%;
    margin:0;
    padding:0;
    font-size:1.2em;
    text-align:center;
    font-weight:bold;
}
#special .baseitemsArea ul.itemlineup li{
    width:45% !important;
    margin:0 2% 5% 2%;
    display: inline-block;
}
@media screen and (min-width: 1000px){
    #special .baseitemsArea{
        padding-bottom:30px !important;
        width:1000px !important;
        margin:50px auto 0 auto !important;
    }
    #special .baseitemsArea .mainttl{
        font-size:16px;
        padding-top:0 !important;
        margin-bottom:40px;
        width:1000px;
    }
    #special .baseitemsArea .mainttl img{
        margin:0 345px 20px 345px;
        width:310px !important;
    }
    #special .baseitemsArea .mainttl hr{
        margin:0 auto 20px auto !important;
    }
    #special .baseitemsArea ul.itemlineup{
        width:1000px;
        margin:0 auto;
        font-size:22px;
    }
    #special .baseitemsArea ul.itemlineup li{
        width:170px !important;
        margin:0 10px 25px 10px;
    }
    #special .baseitemsArea ul.itemlineup li img{
        margin-bottom:10px !important;
    }
    #special .customizeArea ul.lineup li:nth-child(4n){
        margin-right:0 !important;
    }
}


/* sampleArea
----------------------------------------*/
#special .sampleArea{
    background-image: url("../img/samplebg_sp.jpg");
    background-size:100%;
    padding:70px 0 50px 0;
    color:#fff;
    text-align:center !important;
    font-size:1.0em;
}
#special .sampleArea .mainttl{
    font-size:1.0em;
    text-align:center;
    padding-top:10%;
    margin-bottom:5%;
}
#special .sampleArea .mainttl img{
    height:50px !important;
    margin-bottom:3%;
}
#special .sampleArea .mainttl hr{
    height:20px;
    width:3px;
    background-color: #fff !important;
    border: 0;
}
#special .sampleArea .comment{
    font-size:1.0em;
    margin:0 auto;
    line-height:2.0em !important;
}
#special .sampleArea .telmain{
    width:80%;
    margin:20px auto 0 auto;
}
#special .sampleArea .telsub{
    width:70%;
    margin:20px auto 10px auto;
}
#special .sampleArea .time{
    font-weight:normal !important;
    font-size:0.9em !important;
    margin-bottom:20px !important;
}
#special .sampleArea .btn{
    margin:0 auto !important;
}
@media screen and (min-width: 1000px){
#special .sampleArea{
        width:100%;
        background-image: url("../img/samplebg.jpg");
        background-size:100%;
        background-position: center !important;
        padding:50px 0;
        color:#fff;
        text-align:center !important;
        font-size:1.0em;
    }
    #special .sampleArea .mainttl{
        font-size:16px;
        padding-top:0 !important;
        margin:0 auto 40px auto;
    }
    #special .sampleArea .mainttl img{
        margin:0 auto 20px auto;
        width:210px !important;
    }
    #special .sampleArea .mainttl hr{
        margin:0 auto 20px auto !important;
    }
    #special .sampleArea .comment{
        width:1000px;
        margin:0 auto !important;
    }
    #special .sampleArea .telmain{
        width:400px;
        margin:20px auto 0 auto;
    }
    #special .sampleArea .telsub{
        width:270px;
        margin:20px auto 10px auto;
    }
    #special .sampleArea .time{
        font-weight:normal !important;
        font-size:14px !important;
        margin-bottom:20px !important;
    }
    #special .sampleArea .btn{
        margin:0 auto !important;
    }
}


/* scheduleArea
----------------------------------------*/
#special .scheduleArea{
    padding:5% 0 !important;
    background-color: #e5e4e0;
}
#special .scheduleArea .mainttl{
    font-size:1.0em;
    text-align:center;
    padding-top:10%;
    margin-bottom:5%;
}
#special .scheduleArea .mainttl img{
    height:50px !important;
    margin-bottom:3%;
}
#special .scheduleArea .mainttl hr{
    height:20px;
    width:3px;
    background-color: #000 !important;
    border: 0;
}
#special .scheduleArea .schedulebox{
    width:90%;
    margin:0 5% 10% 5%;
    background-color: #000 !important;
    color:#fff;
}
#special .scheduleArea .scheduletext{
    padding:5%;
}
#special .scheduleArea .scheduletext span{
    font-weight:bold;
}
@media screen and (min-width: 1000px){
    #special .scheduleArea{
        padding-bottom:30px !important;
        width:100% !important;
        margin:0 auto !important;
    }
    #special .scheduleArea .mainttl{
        font-size:16px;
        padding-top:0 !important;
        margin:0 auto 40px auto;
    }
    #special .scheduleArea .mainttl img{
        margin:0 auto 20px auto;
        width:265px !important;
    }
    #special .scheduleArea .mainttl hr{
        margin:0 auto 20px auto !important;
    }
    #special .scheduleArea .schedulebox{
        width:1000px;
        height:165px;
        margin:0 auto 50px auto !important;
    }
    #special .scheduleArea .schedulebox img{
        width:490px !important;
        float:left;
        margin:0 !important;
        padding:0 !important;
    }
    #special .scheduleArea .schedulebox .scheduletext{
        width:500px !important;
        display: inline-block;
        float:right;
        padding:0 !important;
    }
    #special .scheduleArea .schedulebox .scheduletext.box1{
        margin:20px 0 0 0 !important;
    }
    #special .scheduleArea .schedulebox .scheduletext.box2{
        margin:50px 0 0 0 !important;
    }
    #special .scheduleArea .schedulebox .scheduletext.box3,
    #special .scheduleArea .schedulebox .scheduletext.box4,
    #special .scheduleArea .schedulebox .scheduletext.box5{
        margin:35px 0 0 0 !important;
    }
}


/* questionArea
----------------------------------------*/
#special .questionArea{
    padding-bottom:5% !important;
    margin:0 5% !important;
}
#special .questionArea .mainttl{
    font-size:1.0em;
    text-align:center;
    padding-top:10%;
    margin-bottom:5%;
}
#special .questionArea .mainttl img{
    height:50px !important;
    margin-bottom:3%;
}
#special .questionArea .mainttl hr{
    height:20px;
    width:3px;
    background-color: #000 !important;
    border: 0;
}
#special .questionArea .comment{
    font-size:1.0em;
    margin:0 auto;
    line-height:2.0em !important;
}
#special .questionArea .comment .attentioncomment{
    margin-top:10px;
    font-size:0.9em;
    line-height:2.0em !important;
    text-align:left;
}
#special .questionArea .comment .question{
    color:#fff;
    font-weight:bold;
    background:#000;
    padding:3px 7px;
    margin-bottom:5px;
}
#special .questionArea p{
    margin-bottom:25px !important;
}
@media screen and (min-width: 1000px){
    #special .questionArea{
        padding-bottom:30px !important;
        width:1000px !important;
        margin:50px auto 0 auto !important;
    }
    #special .questionArea .mainttl{
        font-size:16px;
        padding-top:0 !important;
        margin-bottom:40px;
        width:1000px;
    }
    #special .questionArea .mainttl img{
        margin:0 405px 20px 405px;
        width:90px !important;
    }
    #special .questionArea .mainttl hr{
        margin:0 auto 20px auto !important;
    }
    #special .questionArea .comment{
        width:1000px;
        margin:0 auto !important;
    }
    #special .questionArea .caption{
        font-size:118px;
        text-align:center;
        margin-bottom:20px !important;
    }
    #special .questionArea .comment .question{
        font-size:20px;
        padding: 5px 5px 5px 10px;
    }
    #special .questionArea p{
        margin:10px 0 40px 35px !important;
    }
}



/* contactArea
----------------------------------------*/
#special .contactArea{
    background-image: url("../img/contactbg_sp.jpg");
    background-size:100%;
    padding:70px 0 50px 0;
    color:#fff;
    text-align:center !important;
    font-size:1.0em;
    font-weight:bold;
}
#special .contactArea .telmain{
    width:80%;
    margin:20px auto 0 auto;
}
#special .contactArea .telsub{
    width:70%;
    margin:20px auto 10px auto;
}
#special .contactArea .time{
    font-weight:normal !important;
    font-size:0.9em !important;
    margin-bottom:20px !important;
}
#special .contactArea .btn{
    margin:0 auto !important;
}
@media screen and (min-width: 1000px){
#special .contactArea{
    background-image: url("../img/contactbg.jpg");
    background-size:auto 430px;
    background-position: center !important;
    padding:50px 0;
    color:#fff;
    text-align:center !important;
    font-size:1.0em;
    font-weight:bold;
}
#special .contactArea .telmain{
    width:400px;
    margin:20px auto 0 auto;
}
#special .contactArea .telsub{
    width:270px;
    margin:20px auto 10px auto;
}
#special .contactArea .time{
    font-weight:normal !important;
    font-size:14px !important;
    margin-bottom:20px !important;
}
#special .contactArea .btn{
    margin:0 auto !important;
}
}