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

/**********************************************************************　基本　*******************************************************************************/

html { font-size: 100% }html { height:100% }
body { height:100%; text-align: center } 
body#index { background-color: #000; } 

article { position:relative; margin: 0 } 
ul { margin: 0; padding: 0; list-style: none; }
img, div, p, figure{ margin: 0;padding: 0 }img { border-style: none;vertical-align: bottom }

.rela { position: relative }
.fxt { position: fixed }
.abso { position: absolute }
.clear-box { clear: both;float: none;margin: 0;padding: 0; }
.clearfix:after { content: '';display: block;clear: both; }
.clearfix { zoom: 1; /* for IE6/7 */ }

.typo { font-size: 0; line-height: 0; text-align: left; text-indent: -5000px }

/**********************************************************************　タイポグラフィー　*************************************************************************/

h1,h2,h3,h4 { padding: 0 ; margin: 0 }

.phj img { width: 100%; height: auto }
.txl { text-align: left }
.txj { text-align: justify }

body.en .txj { text-align: left }

.txc { text-align: center }
.txr { text-align: right }

/**********************************************************************　フォントサイズ　*************************************************************************/

section { background-color: hsla(0,0%,0%,1.00) ;}
.abso-box {  }
.read { font-size: 1.0em; line-height: 2.0em; }
.en .read { font-size: 1.2em; line-height: 1.8em; }
.inq-box { font-size: 1.2em; line-height: 1.8em; border: #555 1px solid; background-color: #222; }
.inq-box.thanks { font-size: 1.0em; line-height: 1.8em; padding: 40px; margin-bottom: 50px }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 20px; }
.mb50 { margin-bottom: 50px; }
.mt50 { margin-top: 50px; }
.mt100 { margin-top: 100px; }

th,td 	{ font-size: 0.8em; }

/**********************************************************************　デザイン　*******************************************************************************/

html,body { height: 100%; }
body > #photobg { height: auto; }
body > #photobg > div { height:100%; }

/***********************************************************************　フッター　******************************************************************************/

footer
{
display: block;
clear: both;
float: none;
text-align: center;
position: relative;
padding: 50px 0 50px;
margin: 0 ;
background-color: #fff;
color: #000;
}

/***********************************************************************　写真　スライドショー　スワイパー　******************************************************************************/

.swiper-wrapper { position: relative; /***挑戦***/padding-bottom: 0;margin-bottom: 0;border-bottom: none; }
.swiper-slide img { width: 100%;height: auto;/***挑戦***/padding-bottom: 0;margin-bottom: 0;border-bottom: none;}
.swiper-slide { width: 100%;/***挑戦***/padding-bottom: 0;margin-bottom: 0;border-bottom: none; }
.swiper-slide { font-size: 18px; }  /*変更可能background: #fff;*/
.swiper-container { width: 100%;margin: 0;overflow: hidden;position: relative;/***挑戦***/padding-bottom: 0;margin-bottom: 0;border-bottom: none; }
.swiper-pagination-bullet { width: 10px;height: 10px;display: none }

.swiper-slide {
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
.swiper-slide {/***挑戦***/padding-bottom: 0;margin-bottom: 0;border-bottom: none;
		-webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}




/**********************************************************************　テーブル　*******************************************************************************/

table.couse { font-size: 1.2em; border: 1px solid #ccc; margin: 0 0 10px 1.5em; border-collapse: collapse; border-spacing: 0; }
table.couse th { width: 150px; padding: 5px 0; border-right: 1px solid #ccc; text-align: center; font-family: "Midashi Go MB31"; letter-spacing: 0.07em }
table.couse td { width: 150px; padding: 5px 0; text-align: center; }
table.couse.plt { border-color: hsla(222,28%,84%,1.00); color: hsla(222,28%,84%,1.00); } table.couse.plt th { border-color: hsla(222,28%,84%,1.00); background-color: hsla(222,28%,84%,1); color: #000; }
table.couse.pur { border-color: hsla(283,38%,71%,1.00); color: hsla(283,38%,71%,1.00); } table.couse.pur th { border-color: hsla(283,38%,71%,1.00); background-color: hsla(283,38%,71%,1); color: #000; }
span.plt { color: hsla(222,28%,84%,1); font-family: "Midashi Go MB31"; letter-spacing: 0.07em }
span.pur { color: hsla(283,38%,71%,1.00); font-family: "Midashi Go MB31"; letter-spacing: 0.07em }

/**********************************************************************　フォーム類　*******************************************************************************/

dl.toiawase {font-size: 0.9em;text-align: left}
dl.toiawase dd.submi { text-align: center; margin: 0}
input {margin-right: 5px;margin-bottom: 5px;}
textarea {border: 1px solid #ddd;}

input {font-size: 100%;}
input , textarea {border: 1px solid #cccccc;}

dl, dd, dt{ width: 100%; display: block;}

/*******************************************    Mmailform    ****************************************************/

form { padding: 0; margin: 0 }
.yoko-line{margin: 50px 0; width: 100%;}


dl.toiawase {
border-top: 1px dotted #7e6184; margin-bottom: 50px
}
dl.toiawase.bono {
border-top: 0px dotted #7e6184;
}
dl.toiawase.ofst {
border-top: 0px dotted #7e6184;
}

dl.toiawase dt { font-size: .9em; line-height: 1.7em; padding: 10px 0 0 0 ;margin: 0 0 10px 0;}
dl.toiawase dd { font-size: .9em; line-height: 1.7em; padding: 0 ;margin: 0 0 0 2em;}
dl.toiawase dt.shokai { margin: 0 0 .5em 2em;}
.hissu{ color: hsla(290,37%,66%,1.00); }
span.aki{ display: block; height:10px }

.submi input{ color: #ffffff;padding: 8px 30px 8px 30px; background-color: #7e6184; margin: 30px 10px 0 0px; border-radius: 4px; font-size: 1em;}

ul.awe {
  margin: 0 0 3em 3em;
}
ul.awe li {
  position: relative;
}
ul.awe li::after {
  display: block;
  content: '';
  position: absolute;
  top: .8em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #ccc;
  border-radius: 100%;
}

dd.yoko-narabi { font-size: 100% ; margin: 0 0 10px 0 ;}
dd.yoko-narabi input { margin: 0 10px 0 0; }
dd.yoko-narabi input.sonota { font-size: 85% ; }

dd input.mini{ width: 30% ; }
dd input.mido{ width: 60% ; }
dd input.midos{ width: 55% ; }
dd input.maxx{ width: calc(100% - 40px); }

dd textarea.mido{ height: 100px; width: 60% }
dd textarea.maxx{ height: 100px; width: calc(100% - 40px); }

/************************************************animation************************************************/

.fadeInStay {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInStay;
 animation-name: fadeInStay;
 visibility: visible !important;
}
@-webkit-keyframes fadeInStay {
 0% { opacity: 0; -webkit-transform: translateY(0); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInStay {
 0% { opacity: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}