@charset "UTF-8";
/* CSS Document */

body{
	margin: 0px;
	background-image: url("../img/bg.jpg");
	background-size: 100%;
	background-repeat: no-repeat;}
p{
	font-size: 1.4vw;
	padding: 0;
	margin: 0;}
dd{font-size: 1.4vw;
	margin: 0;
	padding-bottom: 5%;}
a{text-decoration: none;}
h2{
	margin: 0 auto;
	margin-bottom: 5%;
 	border-bottom: solid 2px black;}
h3{
	margin: 0 auto;
	margin-bottom: 3%;}
h3 img{
	width: 80%;
	display: block;
	margin: 0 auto;}


.menu{
	margin: 0 auto;
	width: 35%;
	padding-top: 10%}
.top_logo{
	width: 100%;}
ul{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 67%;}
li{padding-top: 4%;}
.button{
	width: 100%;
	transition: 0.5s;}
.button:hover{
	opacity: 0.7;
	transform: scale(.9, .9);}



.main{
	margin: 0 auto;
	margin-top: 10%;
	max-width: 1200px;
	width: 90%;}

#chapter01{
	margin-top: 15%;
	padding-top: 10%;}
.title1{width: 52%;}
.logo1{width: 67%;}
.chap1{
	width: 29%;
	padding-bottom: 3%;
	margin-right: 3%;}
.bg{
	width: 61%;
	vertical-align: bottom;}
.block{
	width: 53%;
	padding: 0% 4% 0% 4%;
	background-image: url("../img/b01_2.png");
	background-size:100%;
	background-repeat: no-repeat;}
.inners{margin: 0 auto;}
.m1{width: 22%;}
.m2{width: 65%;}
.m3{width: 56%;}
.m4{width: 56%;}



#chapter02{padding-top: 17%;}
.title2{width: 70%;}
.logo2{width: 73%;}
.chap2{
	width: 23%;
	padding-bottom: 3%;
	margin-right: 3%;}
#chapter02 .block{
	float:right;
	background-image: url("../img/b02_2.png")}
#chapter02 h3{margin-bottom: 5%;}
#chapter02 h3 img{width: 90%;}
.bg_r{
	float: right;
	width: 61%;}
.m5{width: 57%;}
.m6{width: 58%;}



#chapter03{padding-top: 17%;}
.title3{
	width: 73%;}
.logo3{width:74%;}
.chap3{
	width: 22%;
	padding-bottom: 3%;
	margin-right: 3%;}
#chapter03 .block{background-image: url("../img/b03_2.png")}
#chapter03 h3{margin-bottom: 5%;}
#chapter03 h3 img{width: 90%;}
.m7{width: 65%;}
.m8{width: 46%;}



#chapter04{
	margin-top: 10%;
	padding-top: 7%;
	margin-bottom: 20%;}
.title4{
	width: 78%;}
.logo4{width: 74%;}
.chap4{
	width: 22%;
	padding-bottom: 1%;
	margin-right: 3%;}
#chapter04 .block{
	float:right;
	background-image: url("../img/b04_2.png");}
	#chapter04 h3{margin-bottom: 6%;}
	#chapter04 h3 img{width: 100%;}
#chapter04 .inner{
	display: flex;
	justify-content: space-between;
	padding-top: 3%;
	align-items: center;}
	#chapter04 .inner2{
		display: flex;
		justify-content: space-between;
		padding-top: 0;
		align-items: center;}
.ship_text1{width: 46%;}
.ship_text2{width: 46%;}
.ship1{width: 52%;}
.ship2{width: 52%;}
.m9{width: 51%;}
.m10{width: 53%;}



footer{
	background: rgba(255,255,255,0.3);
	width: 100%;}
.cm{
	display: block;
	width: 30%;
	margin: 0 auto;
	padding: 5%;}




@media screen and (max-width:700px){
	body{
		margin: 0px;
		background-image: url("../img/bg_s.jpg");
		background-size:100%;
		background-repeat: no-repeat;}
	dd{font-size: 14px;}
	p{font-size: 14px;}
	.menu{width: 80%;}

	#chapter01{
		margin: 0 auto;}
	.title1{
		margin: 0 auto;
		margin-bottom: 5%;}
	.main{margin-top: 20%;}
 	.block{
		width: 80%;
		display: block;
		margin: 0 auto;
		padding: 0% 3% 4% 4%;
		background-size:100%;}
	.bg{
		display: block;
		width: 87%;
		margin: 0 auto;}
	.bg_r{
		display: block;
		vertical-align: bottom;
		width: 87%;
		float: none;
		margin: 0 auto;}
	.inner{
		width: 93%;
		margin: 0 auto;
		padding-top: 3%;}
	#chapter02 .block{float: none;}
	#chapter04 .block{float: none;}
	.ship_text1{
		top: 5%;}
	.ship_text2{top: 55%;}
	.m1{width: 27%;}
	.m2{width: 77%;}
	.m3{width: 65%;}
	.m4{width: 68%;}
	.m5{width: 66%;}
	.m6{width: 65%;}
	.m7{width: 75%;}
	.m8{width: 53%;}
	.m9{width: 58%;}
	.m10{width: 59%;}
	.cm{
		width: 60%;
		padding: 5%;}
}


@media screen and (max-width:450px){
	p{
		font-size: 12px;
		line-height: 13px;}
	.ship_text1{top: 8%;}
	.ship_text2{top: 55%;}
}



@media screen and (min-width:1300px){
	body{
		margin: 0;
		background-image: url("../img/bg00.jpg");
		background-size:cover;
		background-attachment: fixed;}
	.wrapper{
		background-image: url("../img/bg01.png");
		background-size: 1550px;
		background-repeat: no-repeat;
		background-position:top;}
	dd{font-size: 18px;}
	p{font-size: 18px;}
	.menu{
	  padding-top: 130px;
		width: 450px;}
	.main{margin-top: 200px;}
	.cm{
		width: 400px;
		padding: 70px;}
}


#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: white;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: white;}