@charset "UTF-8";
/*===========
body
============*/
@media screen and (orientation: landscape) {/* 横向きの場合のスタイル*/}
@media screen and (orientation: portrait) {/* 縦向きの場合のスタイル */}

/* html/body
------------------------------------------------- */
html{width: 100%;font-size: 62.5%;-webkit-font-smoothing: antialiased;}

@media only screen and (max-width:750px){
html {overflow-x: hidden;}
}
body {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 20px;line-height: 1.8;
position: relative;
width: 100%;
color: #000;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;overflow-x: hidden;position: relative;transition: 0.4s;overflow-x: hidden;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;/*Chrome,Safari*/-ms-text-size-adjust: 100%;/*EgdeMobile*/-moz-text-size-adjust: 100%;/*firefox*/
background: #093d61;
}
@media screen and (max-width: 550px) {/*スマホのスタイル*/
body {font-size: 12px;font-size: 1.2rem;}
}
img{width: 100%;height: auto}
/*STYLE
------------------------------------------------- */
#wrapper {position: relative;max-width: 100%;background:url("../images/bg.png") no-repeat center top;background-size: contain; width:640px;margin: auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}

@media screen and (max-width:640px){/*スマホ設定*/
#wrapper {width: 100%;box-shadow:none}
}

/*header*/
#header{position: relative;padding: 50px 0 0;}
#header .logo{width: 11%; position: absolute;right: 5%;top: 3%}
#header h1{position: relative}
#header .train{margin-top: 75%;}
#header .train li:nth-child(1){width: 50%}
#header .train li:nth-child(2){width: 48%;margin-left: -15%;}
#header .train li:nth-child(2) h2{width: 80%;margin-bottom: 10px}
#header .train li:nth-child(2) p{color: #fff;font-size: 1.5rem}
@media screen and (max-width:767px){/*スマホ設定*/
#header .train{margin-top: 60%;}
#header .train li:nth-child(1){width: 60%}
#header .train li:nth-child(2){width: 80%;margin: 20px auto 0;}
}
.contents.service{width: 96%;margin: 70px auto 0}
.contents.service dt{width: 95%;margin: 0 0 12px auto;}
.contents.service dd{margin-bottom: 20px}
@media screen and (max-width:767px){/*スマホ設定*/
.contents.service dt{width: 100%;}
}

.contents.rental{width: 96%;margin: 40px auto 0}
.contents.rental dt{width: 100%;margin: 0 0 12px 0;}
.contents.rental dt img{width: 95%}
.contents.rental  dd{color: #fff;font-size: 1.5rem;margin-left: 10px;}
@media screen and (max-width:767px){/*スマホ設定*/
.contents.rental dt img{width: 85%}
.contents.rental p{margin-left: 1em;text-indent: -1em;}
}

.contents.toiawase{width: 96%;margin: 40px auto;background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%);
padding: 20px;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;font-size: 1.5rem;
}
.contents.toiawase .col5{margin-right: 20px;}
.contents.toiawase .col5.logo{text-align: center}
.contents.toiawase .col5.logo img{width:80%; }
.contents.toiawase .col3{width: 26%;margin-right: 20px}
.contents.toiawase .col2{width: 44%}
@media screen and (max-width:767px){/*スマホ設定*/
.contents.toiawase .col5{margin-right: 0px;width: 40%;margin-bottom: 12px}
.contents.toiawase .col5.logo{width: 20%; margin-right: 20px}
.contents.toiawase .col5.logo img{width:100%; }
.contents.toiawase .col3{width: 60%;margin-right: 0px}
.contents.toiawase .col2{width: 100%;margin-top: 12px;}
}

#footer{padding: 20px 0 ;font-size: 1.3rem;}
#footer .logo{width: 16%;margin: 0 auto 30px}
#footer .address{;color: #fff;text-align: center}
@media screen and (max-width:767px){/*スマホ設定*/
#footer{font-size: 1rem;}
}

/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn {
  opacity: 0;
  transform: translate(0, 0%);
  transition: 2s;
}
.fadeIn.is-show {
  transform: translate(0, 0);
  opacity: 1;
}