@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');

html {
font-size: 75%;/*12px*/
line-height: 2;/*24px*/
color: #111;
font-family: Work Sans,Helvetica,Arial,"Hiragino Sans","ヒラギノ角ゴシック",YuGothic,"Yu Gothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic";
-webkit-text-size-adjust: 100%;
background-color:white;
font-weight:600;
}

body, ul, ol, dl, dd,tr,th,td,footer{
margin: 0;
padding: 0;
}

li{
	list-style-position:inside;
}

img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

.contents {
width: 91.6666%;
margin: 0 auto;
padding: 1.5em 0;
}

section {
margin: .75em 0;
}

/* -- font -- */

h2,h3 {
line-height: 1.125;
}

h1 {
font-size: 250%;/*38px*/
line-height: 1;
}
h2 {
font-size: 200%;/*32px*/
}
h3 {
font-size: 150%;/*24px*/
}

a {
color: black;
text-decoration: none;
background: transparent;
}

.small {
font-size: 75%;
}

.big {
font-size: 150%;
}

.blue{
color:#4A6CB2;
}

.pink{
color:#ff3366;
}

.text_r {
text-align: right;
}

.title{
text-align: center;
}


/* -- bg -- */

.b_pink,a.b_pink,
.b_blue,a.b_blue,
.b_black,a.b_black{
color: white;
}

.b_gray,a.b_gray{
background-color: #f2f2f2;
}

.b_blue,a.b_blue{
background-color: #4A6CB2;
}

.b_pink{
background-color:#ff3366;
}

.b_white{
background-color: white;
}

.b_trance{
background-color: rgba(255,255,255,.5);
}

.b_gsky{
background: -webkit-linear-gradient(to top, white, #e1f2fa);
background: linear-gradient(to top, white, #e1f2fa);
}

.b_black,a.b_black{
background-color: #111;
}

.bg_snow{
	background-image: url(bg_ice.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}



/* ----- cta ----- */

a.cta{
border-radius:.5em;
text-align:center;
padding:.75em 4.1666%;
font-size:125%;
box-sizing:border-box;
-webkit-transition: color .3s, background-color .3s, box-shadow .3s, -webkit-transform .3s;
transition: color .3s, background-color .3s, box-shadow .3s, transform .3s;
}

a.cta_btn{
border-radius:.5em;
text-align:center;
padding:.75em 5.3%;
font-size:125%;
box-sizing:border-box;
-webkit-transition: color .3s, background-color .3s, box-shadow .3s, -webkit-transform .3s;
transition: color .3s, background-color .3s, box-shadow .3s, transform .3s;
}

a.cta:hover,
a.cta_btn:hover{
background-color:#eee;
color:#777;
box-shadow:none;
-webkit-transform: translateY(.125em);
transform: translateY(.125em);
}

.cta:active,
.cta_btn:active{
transition-duration: .1s;
}

.cta_w{
	margin: 50px 0px;
}

/* ----- waku ----- */

.waku{
border-radius:1em;
padding:.75em 4.1666%;
box-sizing:border-box;
}
.l_pink{
border:.0625em solid #ff3366;
}
.l_black{
border:.0625em solid black;
}
.l_blue{
border:.0625em solid #4A6CB2;
}


/*--col--*/

.col2>li,.col3>li, .col4>li{
margin: .75em 2.5%;
list-style: none;
box-sizing: border-box;
position:relative;
}

.col2>li img,
.col3>li img,
.col4>li img{
width: 100%;
}

.col3>li,.col4>li{
float: left;
}

.col3>li {
width: 28.3333%;
}

.col4>li{
width: 45%;
}


/*--float_kiji--*/

.float_r, .float_l{
padding-bottom: .75em;
}
.float_l_kiji, .float_r_kiji {
margin: 0 4.16665%;
}

.float_l_img img, .float_r_img img {
width: 100%;
}


/* --- ico --- */

.i_snow{
width:1.5rem;
height:1.5rem;
background-image:url(i_snow.svg);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
margin-right:.25em;
margin-left:.25em;
}

/* --selection---*/

::selection {
background: #e7e7e7;
}
::-moz-selection {
background: #e7e7e7;
}

/*---header---*/

#header {
z-index: 9998;
position: relative;
box-sizing: border-box;
width:100%;
background-color: rgba(255,255,255,.75);
padding:.75em 4.1666%;
}

.fixed {
position: fixed !important;
top: 0;
-webkit-animation-duration:.75s;
animation-duration:.75s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-.5em); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-.5em); transform: translateY(-.5em); }
 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

#logo{
display:block;
width:50%;
}

#top {
position:relative;
width:100%;
padding:32.5vh 0;
text-align:center;
}

/* ----- menubtn ----- */

#drawer_menu {
top: 4.5em;
width: 100%;
height: 100%;
right: -100%;
z-index: 9999;
transition:opacity .1s linear;
text-align:center;
position: fixed;
}

#drawer_menu,
#drawer_menu ul>li a,
#drawer_menu ul>li a:hover{
color: white;
}

#drawer_menu ul>li {
list-style: none;
background-color: #999;
text-transform: uppercase;
}

#drawer_menu ul>li a:before,
#drawer_menu ul>li a:after {
transition: background-color 1s;
}

#drawer_menu ul>li:nth-child(odd){
background-color: gray;
}

#drawer_menu ul>li a:hover{
background-color: #48b1bf;
}

#drawer_menu ul>li a,.close{
display: block;
padding: 1.5em 0;
}

#drawer_menu.block {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}


/* ----- menubtn ----- */

.bar {
width: 50%;
height: 5%;
background-color:#4A6CB2;
position: relative;
}

#menu_btn:hover, .bar.top, .bar.middle, .bar.bottom {
opacity: 1;
}
.bar.top {
top: 20%;
}
.bar.middle {
top: 30%;
}
.bar.bottom {
top: 40%;
}

#menu_btn span {
display: block;
}

#menu_btn{
cursor: pointer;
font-size: 66.6%;
line-height: 2;
width: 16.6666%;
top:0;
right:0;
}

#menu_btn p{
position: absolute;
text-align: center;
bottom:-7.5%;
color:#4A6CB2;
}

.bar, #menu_btn p {
left: 25%;
right: 25%;
}


#menu_btn:hover{
background-color:white;
}

#menu_btn{
position:absolute;
height: 100%;
font-weight:600;
color:white;
}


/* --table mail---*/

table{
width: 100%;
border-collapse: collapse;
word-break: break-all;
box-sizing:border-box;
}

th,td{
border:.125em solid #999;
}

th{
padding: 1em 4.1565554%;
background-color:#222;
color:white;
}
td{
background-color:white;
}

tbody tr>th{
border-right:.125em solid white;
border-bottom:.125em solid white;
}

tbody tr th:last-child,
tbody tr:last-child>th:last-child{
border-right:none;
}

tbody tr:last-child>th{
border-bottom:none;
}

td,
input[type=date], option,
input[type=text], input[type=email], input[type=tel],input[type=name],textarea,select {
padding:.75em 2.0833%;
box-sizing: border-box;
}

th strong{
padding:.25em;
background-color:#4A6CB2;
color:white;
}

input[type=date], option,
input[type=text], input[type=email], input[type=tel],input[type=name],textarea,select {
font-size: 125%;/*20px*/
line-height: 2.1;/*42px*/
}
input[type=date], input[type=text], option,
input[type=email], input[type=name], input[type=tel],textarea,select {
display: inline-block;
width: 100%;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
color: transparent;
}

input[type="button"], input[type="reset"], input[type="submit"]{
-webkit-appearance: button;
cursor: pointer;
text-align:center;
padding:0 1em;
margin-top:.75em;
font-size:175%;
border:.125em solid #4A6CB2;
background-color:#4A6CB2;
color:white;
box-sizing:border-box;
border-radius:3rem;
-webkit-transition: color .3s, background-color .3s, box-shadow .3s, -webkit-transform .3s;
transition: color .3s, background-color .3s, box-shadow .3s, transform .3s;
}

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover{
background-color:white;
color:#4A6CB2;
box-shadow:none;
}

::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ccc;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
font-style: italic;
}


/* --- footer --- */

#copy{
text-align:center;
font-size:75%;
color:gray;
}

/*--clear--*/

#logo:after,
.float_l:after,.float_r:after,
.col2:after,.col2_half:after, .col3:after, .col4:after,
#footer_map ul:after{
display: block;
clear: both;
content: ''
}

@media screen and (min-width:480px) {
html {
font-size: 100%;/*16px*/
}
.contents {
width: 83.3333%;
}
}

@media screen and (min-width:640px) {
.col2>li{
float: left;
}
.col2>li{
width:45%;
}
}

@media screen and (min-width:960px) {
html {
font-size: 112.5%;/*18px*/
}

#header{
overflow:hidden;
}

#header_pc {
margin: 0 auto;
position: relative;
}

#drawer_menu ul>li img,#menu_btn{
display:none;
}

#drawer_menu,
#drawer_menu ul>li{
width:auto;
}

#drawer_menu,#drawer_menu.block,
#drawer_menu ul>li,
#drawer_menu ul>li:nth-child(odd),
#drawer_menu ul>li a:hover{
background-color: transparent;
}

#drawer_menu {
position: absolute;
right:0;
top: 0;
opacity: 1;
}

#drawer_menu ul>li {
text-align: center;
box-sizing: border-box;
padding:0 .75em;
float:left;
}

#drawer_menu ul>li a {
position: relative;
display: inline-block;
color:#111;
padding:.25em 0;
font-size: 80%;
}

#drawer_menu ul>li a:hover {
color:#4A6CB2;
}

#drawer_menu ul>li a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color:#4A6CB2;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}

#drawer_menu ul>li a:hover:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

#drawer_menu.block {
-webkit-transform: none;
transform: none;
}

.col4>li{
width: 20%;
}

.float_l,.float_r {
padding:0;
}

.float_l_img, .float_r_img,
.float_l_kiji, .float_r_kiji {
width: 45.8334%;
}
.float_l_kiji br, .float_r_kiji br{
display: inline-block;
}
.float_l_kiji {
margin: 0 0 0 4.1666%;
padding: 1.5em 4.1666% 1.5em 0;
}
.float_r_kiji {
margin: 0 4.1666% 0 0;
padding: 1.5em 0 1.5em 4.1666%;
}
.float_l_kiji,.float_r_img{
float: right;
}
.float_r_kiji, .float_l_img{
float: left;
}

.float_l_kiji p br, .float_r_kiji p br{
display:none;
}
}

@media screen and (min-width:1280px) {
html {
font-size: 125%;/*24px*/
}

section {
margin: 1.5em 0;
}

#header_pc {
width: 91.6666%;
}

.contents {
width: 75%;
}

}

@media screen and (min-width:1600px) {
#header_pc {
width: 75%;
}
.contents{
width: 66.6666%;
}
}

@media screen and (min-width:1900px) {
.contents{
width: 50%;
}
}

/*IE*/
@media all and (-ms-high-contrast: none) {
body {
font-family: Meiryo, sans-serif;
}
}

/*20241028*/
.move{
		text-align: center;
		margin: 0 auto;
}

.move video {
    max-width: 600px;
}

@media screen and (max-width: 960px) {
  .move video{
    width:350px;
    height:auto;
  }
}