@charset "utf-8";

/*=====================================================================================================================
*======================================================================================================================
*
*
*	setting
*
*
*======================================================================================================================
=====================================================================================================================*/
.pc {
  display: block;
  margin: 0 auto;
}

.pci {
  display: inline-block;
}

.sp {
  display: none !important;
}

.spi {
  display: none;
}

.pwi {
  width: 100%;
  height: auto;
  max-height: auto;
}

.left {
  float: left;
}

.right {
  float: right;
}
.t-center{
  text-align:center;
}


#header {
  position: relative;
}
#header {
display: table;
  width: 100% !important;
  text-align: center;
}
.headerinner{
display: table-cell;
vertical-align: middle;
}
@media screen and (max-width: 768px) {
  #header {
  height: 0px !important;
  }
}



p.text{
	width: 800px;
        margin: 0 auto;
        text-align: left !important;
}
.check{
	width: 700px;
        margin: 40px auto 0;
        text-align: left !important;
        background: #000;
        color:#fff; 
        padding: 50px;
}
.list2 li { list-style: none;
	background: url(../images/list-icon2.png) top left no-repeat;
	padding: 10px 0px 10px 70px;
        font-weight: bold;
        color: #000;
	/* 文字が真ん中に位置するように padding で上下の間隔を調整する。*/
	/* 38pxの部分に「画像File」の横幅に隙間分のpxを足した数を入れる */
}

.copy { 
        width: 100%;
        display: block;
        margin: 0 auto !important;
        text-align:center;
	background: url(../images/copy-bg.jpg) top no-repeat;
}
.ttl { 
        width: 100%;
        display: block;
        margin: 0 auto !important;
	padding-top:30px;
	padding-bottom:30px;
        text-align:center;
	background:background: -moz-linear-gradient(top, #f4811f, #ed2524);
	background: -webkit-linear-gradient(top, #f4811f, #ed2524);
	background: linear-gradient(to bottom, #f4811f, #ed2524);
}

.benefit { 
        width: 800px;
        display: block;
        margin: 60px auto !important;
        text-align:left;
        font-weight:700;
	font-size:18px;
}



.text2 { 
        width: 550px;
        display: block;
        margin: 0 auto !important;
        padding: 30px;
        background: #fff; 
        text-align:left;
        border: 1px #000 solid;
}

.text3 { 
        width: 650px;
        display: block;
        margin: 0 auto !important;
        text-align:left;
        border: 1px #000 double;
padding:30px;
font-size:12px;
}

.button{text-align:center !important; margin: 0 auto !important;}

.button a:hover img{
	background:#fff;
	opacity: 0.5;
	border-radius: 46px;
    -webkit-border-radius: 46px;
    -moz-border-radius: 46px;  
}
.button a:hover img
{ -webkit-animation: boyooon .9s; -moz-animation: boyooon .9s; animation: boyooon .9s; }

@-webkit-keyframes boyooon { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.15, 0.75, 1); transform: scale3d(1.15, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.15, 1); transform: scale3d(0.75, 1.15, 1); }
  50% { -webkit-transform: scale3d(1.05, 0.85, 1); transform: scale3d(1.05, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@-moz-keyframes boyooon { from { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -moz-transform: scale3d(1.15, 0.75, 1); transform: scale3d(1.15, 0.75, 1); }
  40% { -moz-transform: scale3d(0.75, 1.15, 1); transform: scale3d(0.75, 1.15, 1); }
  50% { -moz-transform: scale3d(1.05, 0.85, 1); transform: scale3d(1.05, 0.85, 1); }
  65% { -moz-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -moz-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  to { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes boyooon { from { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.15, 0.75, 1); -moz-transform: scale3d(1.15, 0.75, 1); transform: scale3d(1.15, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.15, 1); -moz-transform: scale3d(0.75, 1.15, 1); transform: scale3d(0.75, 1.15, 1); }
  50% { -webkit-transform: scale3d(1.05, 0.85, 1); -moz-transform: scale3d(1.05, 0.85, 1); transform: scale3d(1.05, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  to { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}


.text2 {
    line-height: 35px;
    font-size: 16px;
    background: url(../images/bg01.jpg) #f4f1e0;
    margin: 0px auto;
    padding: 25px 50px;
    border-width: 3px;
    border-style: double;
    border-color: #6a5a00;
    border-image: initial;
    text-align:center;
}
.text1 {
    line-height: 35px;
    font-size: 16px;
    margin: 0px auto;
    padding: 50px 50px 75px;
}
.text3 { 
        width: 650px;
        display: block;
        margin: 80px auto !important;
        text-align:left;
        border: 1px #000 double;
padding:30px;
font-size:12px;
}

.boxblue {
    padding: 0.5em 1.5em;
    margin: 2em;
    background: #d5f7f4;
    box-shadow: 0px 0px 0px 10px #d5f7f4;
    border: dashed 2px white;
    font-weight:400;
}

@media screen and (max-width: 768px) {
  .koebox h3 {
    font-size: 30px;
  }
.koebox {
  padding: 5px;
width:100%;
display: block;
}
.koebox img {
  padding-left: 0px !important;
}

}




@media screen and (max-width: 768px) {
  section {
    padding: 10px !important;
}

 }


@media screen and (min-width: 480px) and (max-width: 767px)  {
	/* 480px - 767px用（タブレット／スマートフォン用）の記述 */
#modal-open{display:none;}
#modal-content{display:none;}
}