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

 

p,h1,h2,h3,h4,h5,h6{
	margin-top: 0;
}

img{
	
	vertical-align: bottom;
}

a {
    text-decoration:none; 
}

ul {
	margin:0;
	padding: 0;
}


body{
}




h3 {
	position: relative;
	text-align: center;
	margin: 30px 0px 25px 0px;
	font-size: 10px;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-style: normal;
}

h4{
	position: relative;
	text-align: center;
	margin: 20px 0px 50px 0px;
	font-size: 8px;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-style: normal;
	
}

h5 {
	position: relative;
	text-align: center;
	color: #000000;
	margin: 20px 0px 20px 0px;
	font-size: 22px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-style: normal;
}


.top-box {
    position: relative;
	width: 100vw;
	height: 100vh;
	margin-bottom: 0px;
}

.title{
	position: absolute;
	display: block;
	text-align: center;
	top:6%;
	left: 0;
 	right: 0;
    margin: auto;
	width: 60vw;
	max-width: 550px;	
	
}

.title img{
	width: 100%;
}

.titleimage{
	position: relative;
	display: block;
	text-align: center;
	top:0%;
	left: 0;
 	right: 0;
    margin: auto;
	width: 100vw;
	max-width: 750px;	
	
}

.titleimage img{
	width: 100%;
}

.titleshita{
	position: absolute;
	display: block;
	text-align: center;
	bottom:10%;
	left: 0;
 	right: 0;
    margin: auto;
	width: 50vw;
	max-width: 500px;	
	
}

.titleshita img{
	width: 100%;
}


.bigbox{
	display: flex;
	width: 100vw;
	height: 100%; 
	margin-bottom: 10px;
}


.itembox{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	gap: 20px 5%;
}



.item{
	    width: 30%;

}


.item img{
	width: 100%;
}

.mordalnaka{
	    width: 400px;
		padding: 30px;
		margin: 0 auto;
}


.mordalnaka img{
	width: 100%;
}



.foot{
	bottom: 0;
	width: 100vw;
	height: 150px;
	background-color: #0057a7;
	margin-top: 180px;
}

.footlogo{
	padding-top: 20px;
    margin: 0 auto;
	width: 350px;

}

.footlogo img{
	width: 100%;
}





.maintext{
	position: relative;
	display: block;
	text-align: justify;
	font-size: 14px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	padding-left: 5%;
	padding-right: 5%;
	left: 0;
	right: 0;
	letter-spacing: 0.02em;
	line-height:200%;
 	color: #000000;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 500;
	max-width: 700px;
	}



.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
  max-width: 1080px; /* 最大幅 */
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


.js-animation img { 
	width: 100%;
}







.creditbox{
	padding-top: 10px;
	padding-bottom: 100px;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 30px;
	width: 90vw;	
}


.credit{
	margin: 0 auto;
	padding-left: 50px;
	text-align: left;
	font-size: 16px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #db5c2f;
	text-decoration: none;
	font-family: nimbus-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	
}

.credit a{
	color: #db5c2f;
}

.credit p{
	color: #db5c2f;
}

span {
	display: inline-block;
	margin-right: 10px;
}

span2 {
	border-bottom: solid 1.5px #db5c2f;
}

span3 {
}



.bottomlink{
	display: flex;
	display: -webkit-flex;
	top:0;
	right: 0;
	width: 100%;
	margin-right:0px;
	margin-top: 0px;
}

.pretext{
	display: inline-block;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height:1em;
	color: #ffffff;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 600;
	margin: 22px auto;
	border-bottom: solid 2px #ffffff;
	}

.pretext a{
	text-decoration: none;
}





.moviestyle{
	margin: 0 auto;
	padding-bottom: 120px;
	width: 90vw;
	max-width: 700px;
}



/* ハロサン用追加 */



.photo01{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;	
}

.photo01 img{
	width: 100%
}


.photo02{
	width: 100%;
	max-width: 750px;
	margin: 50px auto 0px;	
}

.photo02 img{
	width: 100%
}

.tap{
	width: 200px;
	margin: 10px auto 2px auto;	
}

.photo01 img{
	width: 100%
}



.fade-img-box {
 width: 90%;
 height: 300px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box02 {
 width: 100%;
 height: 500px;
 margin: 20px auto;
 position:relative;
}

.fade-img-box02 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}



.layout{
		position: absolute;
		top:30px;
		display: flex;
   		flex-wrap: wrap;
		text-align: center;
		margin: 0 auto;
		max-width: 750px;
}

.layout02{
		position: absolute;
		top:95px;
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 auto;
		max-width: 750px;
}

.itemall{
	width: 100vw;
	margin-top: 10px;
	margin-bottom: 20px;
}

.parent_box {
  width: 100vw;
  max-width: 750px;
  display: flex;
	margin: 20px auto;
}

.side_image{
	width: 30vw;
}

.side_image img{
	width: 100%;
}

.side_text_box{
	width: 70vw;
}


.note{
	position: relative;
	width: 100vw;
	height: auto;
	max-width: 600px;
	margin: 10px auto 0px;	
	padding-bottom: 250px;
}

.pr{
	position: relative;
	width: 100vw;
	height: 520px;
	max-width: 600px;
	margin: 0px auto 0px;	
	padding-bottom: 0px;
}

.prcopy{
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.prcopy img{
	width: 100%
}

.hello{
	position: absolute;
	right: 40px;
	top:370px;
	width: 200px;
}

.hello img{
	width: 100%
}


.sweatbase{
	position: relative;
	width: 100vw;
	height: 500px;
	max-width: 600px;
	margin: 50px auto 0px;	
	padding-bottom: 0px;
}

.sweat{
	position: absolute;
	top:0;
	left:0;
	right: 0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.sweat img{
	width: 100%
}

.sweaticon{
	position: absolute;
	top:50px;
	right: 20px;
	width: 130px;
	margin: 0 auto;	
	animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}


.creditbox02{
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	width: 90vw;	
}

.creditbox03{
	padding-top: 10px;
	padding-bottom:0px;
	margin-bottom: 30px;
	width: 50vw;	
}

.creditbox04{
	padding-top: 10px;
	padding-bottom: 100px;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 30px;
	width: 90vw;	
}

.bgcolor01{
	position: relative;
    top: 0;
    left: 50%;
    display: block;
    width: 100vw;
    height: 1980px;
    background: #91B6B5;
    margin-left: -50vw;
	z-index: 1;
}

.genkan{
	position: absolute;
	top:20px;
	left:0;
	right: 0;
}



.photo04 {
  	width: 100%;
	max-width: 750px;
  	animation: poyopoyo 2s ease-out infinite;
  	opacity: 1;
	margin: 0 auto;
}

@keyframes poyopoyo {
  50%, 70% {
    transform: scale(0.95);
  }
}


.creditr{
	margin: 0 auto;
	text-align: left;
	font-size: 16px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #db5c2f;
	text-decoration: none;
	font-family: nimbus-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	white-space: nowrap;
	
}

.creditr a{
	color: #db5c2f;
}

.creditr p{
	color: #db5c2f;
}

.photo05 {
  	width: 100%;
	max-width: 750px;
	margin: 0 auto ;
	padding-top: 50px;
}

.photo06 {
  	width: 100%;
	max-width: 750px;
	margin: 0 auto ;
	padding-top: 50px;
	padding-bottom: 50px;
}


.contents{
	display: flex;
	width: 600px;
	padding-left:700px;
	padding-right:200px;
}


.contents_box{
	position: absolute;
	display:block;
	width: 100%;
	max-width: 600px;
	background-color:rgba(255,255,255,0.8);
}


.mordalicon{
	position: fixed;
	display: block;
	text-align: center;
	top:150px;
 	left: 50px;
	width: 600px;
	z-index: 200;	
}

.mordalicon img{
	width: 100%;
}

.overflow{
	overflow:hidden;	
	}


/* SP */


@media screen and ( max-width : 750px ){


	
.contents{
	display: flex;
	width: 100%;
	padding-left:0px;
	padding-right:0px;
}


.contents_box{
	position: absolute;
	display:block;	
}
	
.mordalicon{
	display: none;
}

	
}








/* PC */

@media screen and ( min-width : 750px ){
	
body{
	background: url("../images/L1002378.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
}

.fade-img-box {
 height: 500px;
}
	
.itemall{
	width: 600px;
	margin-top: 30px;
	margin-bottom: 20px;
}
	
.sweatbase{
	height: 700px;
}
	
.bgcolor01{
    width: 600px;
    height: 3150px;
	top: 0;
    left: 0;
	margin-left: 0;
}
	
.creditbox03{
	padding-top: 40px;
	padding-bottom: 100px;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 30px;
	width: 200px;
}
	
.fade-img-box02 {
 height: 700px;
}
	
.pr{
	height: 750px;
}
	
.hello{
	top:500px;
}

	
	

	
}