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



/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼MAINVISUAL▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
.block01{
	width: 100%;
	margin: 0 auto 5%;
}

.block01 .back01{
	width: 100%;
	max-width: 100%;
	background: url("../img/svg/cloud_02.svg")no-repeat;
	background-position: center left;
	background-size: 50%;
}

.block01 .mainvisual{
	margin: 0 auto 0;
	width: 100%;
	max-width: 1680px;
	padding:0 5%;
	position: relative;
}

.block01 .mainvisual h1{
	margin: 0 auto 0;
	width: 100%;
}

.block01 .mainvisual h1 img{
	width: 100%;
	height: auto;
}

.block01 .main-logo{
	width: 100%;
	margin: -50px auto 0;
}

.block01 .mainvisual .kamome01{
	position: absolute;
    top: 10%;
    left: 7%;
	animation-name: kamome01;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.8s;
}

@keyframes kamome01{
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}



.block01 .mainvisual .kamome02{
	position: absolute;
    top: 10%;
    right: 2%;
	animation-name: kamome02;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes kamome02{
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-35px)
    }
}


.block01 .mainvisual .ikari{
	position: absolute;
    bottom: 35%;
    left: 5%;
}
.block01 .mainvisual .maguro{
	position: absolute;
    bottom: 0;
    left: 37%;
}
.block01 .mainvisual .mure01{
	position: absolute;
    bottom: 0;
    left: 10%;
}
.block01 .mainvisual .mure02{
	position: absolute;
    bottom: 0;
    right: 5%;
}
.block01 .mainvisual .mure-mb{
	position: absolute;
    bottom: 0;
    right: 5%;
	display: none;
}

/* ***********MaxWidth1280(tablet)*********** */
@media screen and (max-width: 1280px) {
 /* ---------------------------------- */
.block01 .main-logo{
	width: 30%;
	margin: -50px auto 0;
}	
	
	
.block01 .mainvisual .kamome01{
	width: 10%;
	position: absolute;
    top: 10%;
    left: 7%;
}
.block01 .mainvisual .kamome02{
	width: 17%;
	position: absolute;
    top: 10%;
    right: 2%;
}
.block01 .mainvisual .ikari{
	width: 10%;
	position: absolute;
    bottom: 35%;
    left: 5%;
}
.block01 .mainvisual .maguro{
	width: 10%;
	position: absolute;
    bottom: 0;
    left: 40%;
}
.block01 .mainvisual .mure01{
	max-width: 40%;
	position: absolute;
    bottom: 0;
    left: 5%;
}
.block01 .mainvisual .mure02{
	max-width: 40%;
	position: absolute;
    bottom: 0;
    right: 3%;
}

 /* ---------------------------------- */
}
/* ***********MaxWidth1110(tablet)*********** */
@media screen and (max-width: 1110px) {
 /* ---------------------------------- */

.block01 .mainvisual .mure01{
	max-width: 25%;
	position: absolute;
    bottom: 0;
    left: 5%;
}
.block01 .mainvisual .mure02{
	max-width: 25%;
	position: absolute;
    bottom: 0;
    right: 3%;
}

 /* ---------------------------------- */
}

/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
.block01 .back01{
	background-position: bottom left;
	background-size: 40%;
}
	
.block01 .main-logo{
	width: 25%;
	margin: -50px auto 0;
	position: absolute;
	bottom: -30%;
	right: 50px;
}	
	
.block01 .mainvisual .ikari{
	width: 7%;
	position: absolute;
    bottom: 0%;
    left: 10%;
}
.block01 .mainvisual .maguro{
	display: none;
}
.block01 .mainvisual .mure01{
	display: none;
}
.block01 .mainvisual .mure02{
	display: none;
}
.block01 .mainvisual .mure-mb{
	width: 65%;
	position: absolute;
    bottom: -30%;
	left: 2%;
	display: block;
}

 /* ---------------------------------- */
}

/* ***********MaxWidth480(tablet)*********** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */


 /* ---------------------------------- */
}

/* ***********MaxWidth420(tablet)*********** */
@media screen and (max-width: 420px) {
 /* ---------------------------------- */


 /* ---------------------------------- */
}

/* ***********MaxWidth380(tablet)*********** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */


 /* ---------------------------------- */
}

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲MAINVISUAL▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼block02▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

.block02{
	width: 100%;
	max-width: 100%;
	background: url("../img/svg/cloud_03.svg")no-repeat;
	background-position: top right;
	background-size: 50%;
}

.block02 .box02{
	width: 100%;
	margin: 0 auto 0;
	max-width: 100%;
	padding: 0 10%;
}

.block02 .box02>div{
	width: 100%;
	max-width: 100%;
	position: relative;
}

.block02 .box02 .greeting{
	text-align: left;
}

.block02 .box02 .handle{
	width: 24%;
	position: absolute;
	top:0;
	right: -2%;
	z-index: 2000;
	animation:6s linear infinite rotation1;
}

.block02 .box02 .handle img{
	width: 100%;
	height: auto;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.block02 .box02 .gb01{
	width: 100%;
	margin: 5% auto 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}

.block02 .box02 .gb01 dt{
	width: 40%;
	margin: 0 auto 0;
}

.block02 .box02 .gb01 dd{
	width: 50%;
	margin: 0 auto 0;
	text-align: left;
	letter-spacing: 2px;
	line-height: 1.5;
}


/* ***********MaxWidth1280(tablet)*********** */
@media screen and (max-width: 1280px) {
 /* ---------------------------------- */

.block02 .box02 .greeting{
	text-align: left;
	width: 50%;
}
	
.block02 .box02 .handle{
	width: 24%;
	top:-2%;
	right: -5%;
}


.block02 .box02 .gb01{
	width: 100%;
	margin: 5% auto 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.block02 .box02 .gb01 dt{
	width: 40%;
	margin: 0 auto 0;
}

.block02 .box02 .gb01 dd{
	width: 50%;
	margin: 0 auto 0;
	text-align: left;
	letter-spacing: 2px;
	line-height: 1.5;
	z-index: 1;
}

 /* ---------------------------------- */
}

/* ***********MaxWidth1050(tablet)*********** */
@media screen and (max-width: 1050px) {
 /* ---------------------------------- */
.block02 .box02 .gb01 dd{
	font-size: 1.2rem;
}

 /* ---------------------------------- */
}
/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
.block02{
	width: 100%;
	margin: 20% auto 0;
	max-width: 100%;
	background: url("../img/svg/cloud_03.svg")no-repeat;
	background-position: top right;
	background-size: 50%;
}
	

.block02 .box02 .greeting{
	text-align: left;
	width: 90%;
	margin: 35% 0 0 0;
}
	
.block02 .box02 .handle{
	width: 30%;
	top:15%;
	right: -5%;
}

	

.block02 .box02 .gb01{
	width: 100%;
	margin:0 auto 0;
	display: block;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.block02 .box02 .gb01 dt{
	width: 75%;
	margin: 2% auto 0;
}

.block02 .box02 .gb01 dd{
	width: 100%;
	margin: 0 auto 0;
	text-align: left;
	letter-spacing: 2px;
	line-height: 1.5;
	z-index: 1;
}

 /* ---------------------------------- */
}
/* ***********MaxWidth480(tablet)*********** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */


 /* ---------------------------------- */
}

/* ***********MaxWidth420(tablet)*********** */
@media screen and (max-width: 420px) {
 /* ---------------------------------- */


 /* ---------------------------------- */
}

/* ***********MaxWidth380(tablet)*********** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */


 /* ---------------------------------- */
}

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲block02▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼block03▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

.block03{
	width: 100%;
	margin: 2% auto 0;
	max-width: 100%;
	background: url("../img/svg/cloud_04.svg")no-repeat;
	background-position: top left;
	background-size: 100%;
	height: auto;
}

	
.block03 .box03 ul{
	width: 100%;
	margin: 0 auto 0;
	padding: 0 5%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.block03 .box03 ul .left{
	width: 50%;
}
.block03 .box03 ul .left-mb{
	display: none;
}

.block03 .box03 ul .ship{
	width: 30%;
}

/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
.block03{
	width: 100%;
	margin: 15% 0 0 0 ;
	padding: 0 5%;
	background: url("../img/svg/cloud_04.svg")no-repeat;
	background-position: top left;
	background-size: 100%;
	height: auto;
}

.block03 .box03 ul .left-mb{
	display: block;
	width: 80%;
	margin: 0 auto;
}	
	
.block03 .box03 ul .left{
	display: none;
}

.block03 .box03 ul .ship{
	display: none;
}

 /* ---------------------------------- */
}
/* ***********MaxWidth420(tablet)*********** */
@media screen and (max-width: 420px) {
 /* ---------------------------------- */
.block03 .box03 ul .left-mb{
	display: block;
	width: 80%;
	
}	

 /* ---------------------------------- */
}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲block03▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼block04▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
.block04{
	background-color: #fff;
	padding-top: 5%;
}

.block04 .box04 .results{
	width: 50%;
	margin: 0 0 0 auto;
	padding: 2% 5% 0;
}


/*▼▼▼▼▼▼▼▼スライダー▼▼▼▼▼▼▼▼▼▼▼*/
.sakana{
	overflow-x: hidden;
}

.block04 .sakana .row{
	width: 100%;
	margin: 1% auto 0;
}
.block04 .sakana .row:first-of-type{
	margin-top: 3%;
}

.sakana .row .autoplay-slider{
  display: flex;
  width: 100%;
}
.sakana .row .autoplay-slider .slide{
  height: 345px;
  width: 450px;
  margin: 5px;
  position: relative;
  overflow-x: hidden;
} 

.sakana .row .autoplay-slider .slide img{
  width: 100%
} 

@keyframes sliderAnimation {
  100% {
    transform: translateX(-50%);
  }
}

.sakana .row .autoplay-slider{
  display: flex;
  min-width: 100%;
  width: min-content;
  animation: 50s linear infinite sliderAnimation;
}

.sakana .row:nth-of-type(2) .autoplay-slider{
  animation: 50s linear infinite reverse sliderAnimation;
}

/* ***********MaxWidth1000(tablet)*********** */
@media screen and (max-width: 1000px) {
 /* ---------------------------------- */
.sakana .row .autoplay-slider .slide{
  height: 230px;
  width: 300px;
  margin: 5px;
  position: relative;
  overflow-x: hidden;
} 

 /* ---------------------------------- */
}

/* ***********MaxWidth768(tablet)*********** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
.sakana .row .autoplay-slider .slide{
  height: 115px;
  width: 150px;
  margin: 5px;
  position: relative;
  overflow-x: hidden;
} 

 /* ---------------------------------- */
}


/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲block04▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/