@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&family=Roboto:wght@100;300;400;700&display=swap');

/* 初期設定リセット */
*{margin: 0;padding: 0}

/* 基本設定 */
html,body {
margin: 0;
padding: 0;
width : 100%;
height: 100%;
}

.pc {display:block;}
.sp {display: none;}

@media screen and (max-width: 640px) {
.pc {display: none;}
.sp {display:block;}
}

body {
overflow-x: hidden;
font-weight: 500;
color: #333;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
border-top: 7px solid #005d8d;
}
/* フェードインアニメーション */
@keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes 'fadeIn' {0% {opacity:0;} 100% {opacity:1;}}
.fadeIn, img.fadeIn {
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}

.flex {
display: flex;
justify-content: center;
align-items: center;
}

.col {
  display:flex;
  flex-flow: column;
justify-content: center;
}

.colt {
  display:flex;
  flex-flow: column;
}

div, p {font-family: 'Noto Sans JP', sans-serif;}

p {
margin-bottom: 1em;
font-seize: 16pt;
line-height: 1.5;
font-weight: 300;
}

p span {font-weight: 500;}

a {color: #135ca0;}
.brand {
height: 180pt;
display: flex;
justify-content: left;
align-items: center;
}
.brand img {
display: block;
max-width :150px;
margin: 40px 0 0 80px;
}

.nav {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
height: 180pt;
margin: 0;
padding: 0;
}

.nav li {
list-style: none;
-webkit-transform: skewX(160deg);
-moz-transform: skewX(160deg);
transform: skewX(160deg);
border-right: 1px solid #448aca;
}

.nav li a {
display: inline-block;
height: 25pt;
padding: 0 20px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 100%;
font-weight: 200;
color: #333;
transform: skewX(-160deg);
}

.nav li:last-child {
border-right: none;
}

.nav li .login {
background: #eeeeee;
padding: 0 30px;
}

.nav li a:hover {
padding: 0 30px 0 10px;
}

a {transition: all .5s;}
a:hover {color: #3472b0;}

h1, h2, h3, h4, h5, div, p {font-family: 'Noto Sans JP', sans-serif;}

ul, ol {
padding: 0;
margin: 0.5em 20px 1.5em;line-height: 1.5;
list-style-position: inside;
}

.copy {
max-width: 100%;
min-height: 400px;
position: relative;
padding: 0.5em
z-index: 10 !important;
font-weight: 300;
text-align: right;
margin: 0;
}

.contentcopy {
position: relative;
padding: 0;
z-index: 10 !important;
background: #448aca;
font-weight: 300;
text-align: center;
color: #fff;
height: 180px;
z-index: -1;
}

.contentcopy:after {
content: '';
display: block;
position: absolute;
top: -30px;
right: 5%;
width: 70px;
height: 100%;
background: #135ca0;
-webkit-transform: skewX(160deg);
-moz-transform: skewX(160deg);
transform: skewX(160deg);
}

.copytext {
position: absolute;
top: 0px;
right: 0;
max-width: 60%;
font-weight: 500;
color: #fff;
line-height: 1;
padding: 0;
text-align: right;
}

.copy:before {
content: '';
display: block;
background: #448aca;
height: 50%;
width: 35vw;
position: absolute;
top: 15%;
left: 0;
border-right: 7vw solid #135ca0;
}

.copy:after {
content: '';
display: block;
background: #a9d2f5;
height: 10vw;
width: 10vw;
position: absolute;
top: 45%;
left: 30vw;
z-index: -5;
}

.subcopy {
font-size: 1em;
font-weight: 300;
color: #333;
width: 75%;
}

/* コンテンツブロック */
section {
max-width: 1300px;
padding: 5vh 5vw 7vh;
clear: both;
margin:  auto;
display:flex;
flex-flow: column;
justify-content: center;
}

.sec-title {
font-size: 3.5em;
font-family: 'Roboto', sans-serif !important;
font-weight: 900;
text-align: center;
display: block;
width: 100%;
letter-spacing: 0.1em;
z-index: 10;
}

h2 {
font-size: 1.25em;
font-weight: 300;
display: block;
clear: both;
margin-bottom: 1em;
z-index: 10;
}

.book {position:relative;}

.book:after {
content:'';
display: block;
position: relative;
background: #c5dcf0;
position: absolute;
top: 0;
right: 0;
height: 380px;
width: 50%;
z-index: -2;
}

.book:before {
content:'';
display: block;
width: 60%;
height: 70px;
background: #135ca0;
position: absolute;
bottom: 50px;
right: 0;
z-index: -1;
}

.bgc5dcf0 img {
display: block;
position: absolute;
top: 20px;
left: 20px;
z-index: 10 !important;
max-height: 300px;
}

.about {position: relative;}

.about:before {
content:'';
display: block;
position: absolute;
background: #e6edf4;
height: 300px;
width: 60%;
top: 0px;
left: 0px;
}

.about:after {
content:'';
display: block;
width: 70px;
height: 320px;
background: #135ca0;
position: absolute;
top: 50px;
left: 70px;
z-index: 2;
}

.bge6edf4 div {margin: 30px 30px 30px 120px}

.bu-title {
font-size: 1.4em;
font-family: 'Roboto', sans-serif !important;
font-weight: 900;
text-align: center;
display: block;
width: 100%;
letter-spacing: 0.1em;
}

.sq {
margin: 0;
min-height: 300px;
}

.bu1 {background: url(../images/bu1.jpg);}
.bu2 {background: url(../images/bu2.jpg);}
.bu3 {background: url(../images/bu3.jpg);}

.buc {
display: block;
height: 280px;
width: 90%;
background: rgba(255,255,255,0.5);
margin: 15px auto;
display:flex;
flex-flow: column;
justify-content: center;
}

.business {
position:relative;
}
.business:before {
content:'';
display: block;
width: 80%;
height: 70px;
background: #135ca0;
position: absolute;
bottom: 0px;
left: 0;
z-index: -2;
}

.business:after {
content:'';
display: block;
width: 40%;
height: 100px;
background: #448aca;
position: absolute;
bottom: 20px;
right: 0;
z-index: -5;
}

.company {position:relative;}

footer {padding-bottom: 50px;}

.brand-flogo img {
display: block;
margin: 50px auto 15px;
max-width: 100px;
}

.copyright {
font-weight: 200;
font-size: 0.8em;
}

hr {border:none;}

.content {max-width: 960px;}

.content h3 {
font-size: 1.4em;
font-weight: 200;
padding: 0.5em;
margin: 1em auto;
border-bottom: 10px solid #448aca;
position: relative;
}

.header {
padding: 0.5em 1em;
background: #f6f8fa;
font-weight: 200;
border-radius: 2em;
margin: 1em auto 0.5em;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.more {
display: block;
max-width: 150px;
margin: 0 auto;
padding: 0.5em 1em;
margin-top: 1em;
color: #333;
text-decoration: none;
font-weight: 300;
border: 1px solid #666;
border-radius: 3em;
line-height: 1;
}

.more:hover {background: #135ca0;color: #fff;}

.link {
display: block;
min-width: 80%;
max-width: 80%;
margin: 0 auto;
padding: 1em;
margin-top: 1em;
color: #333;
text-decoration: none;
font-weight: 300;
border: 1px solid #666;
border-radius: 3em;
line-height: 1;
text-align: center;
}

.link:hover {background: #135ca0;color: #fff;}


.cimg img {
max-width: 500px;
max-height: 500px;
}

.bookt {min-height: 6em;}

@media screen and (max-width: 640px) {
.brand {
height: 100pt;
display: block;
}
.brand img {
display: block;
max-width :120px;
margin: 15px 0 0 15px;
}

.copy {
max-width: 100%;
min-height: 190px;
position: relative;
padding: 0.5em
z-index: 10 !important;
font-weight: 300;
text-align: right;
margin: 0;
}
  
.copytext {
max-width: 90%;
padding: 0;
}

.subcopy {
font-size: 8pt;
font-weight: 300;
color: #333;
width: 100%;
}

.contentcopy {overflow: hidden;}

.copy:before {
content: '';
display: block;
background: #448aca;
height: 40%;
width: 20vw;
position: absolute;
top: 5%;
left: 0;
border-right: 7vw solid #135ca0;
}

.copy:after {
content: '';
display: block;
background: #a9d2f5;
height: 15vw;
width: 15vw;
position: absolute;
top: 28%;
left: 10vw;
z-index: -5;
}
section {padding: 1em 2%;overflow: hidden;}
.sec-title {font-size: 2em;}
.about:before {
content:'';
display: block;
position: absolute;
background: #e6edf4;
height: 300px;
width: 60%;
top: 15%;
left: 0px;
}

.about:after {
content:'';
display: block;
width: 30px;
height: 320px;
background: #135ca0;
position: absolute;
top: 20%;
left: 30px;
z-index: 2;
}

.business:before {
width: 70%;
bottom: -10px;
}

.business:after {
bottom: 0px;
right: 0px;
}
.colt p {max-width: 96% !important;margin: 0 auto;}
.nav {
display: flex;
position: relative;
height: 50pt;
padding: 0;
margin: 0;
}

.nav li {
display: inline-block;
font-size: 10pt;
border: none;
-webkit-transform: skewX(0deg);
-moz-transform: skewX(0deg);
transform: skewX(0deg);
}

.nav li a {
height: 25pt;
padding: 0 10px;
text-align: center;
transform: skewX(0deg);
}
.cimg img {
max-width: 96%;
max-height: 400px;
}
.bge6edf4 div {margin: 30px 30px 30px 70px}
}

.main_form {
margin: 2em 0;
padding: 0 ;
}

.marine_form {
margin: 2em 0;
padding: 0;
}

.main_form iframe {
height: 600px;
}

.marine_form iframe {
height: 910px;
}

.small {
font-size: 80%;color: #666;
padding: 1em;
}

.small p {margin: 0;}