:root {
  --main-font: 'Zen Maru Gothic', sans-serif;
  --hero-bg-gradient: linear-gradient(158deg, #F9C349 0%, #E84F58 25%, #997DB6 50%, #7BBEE9 75%, #2AB5AF 100%);
}



body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--main-font);
	background-color: #F5F5F5 ;
}

.rainbow-background-container {
	
}


.rainbow-background {
    position: relative;
  	padding-bottom: 4%;
    background: var(--hero-bg-gradient) 0% 0% no-repeat;
    opacity: 1;
	max-width: 1200px ;
	margin: 0 auto;
}

.hero-first, .hero-second, .hero-therd {
    font-weight: 900;
    white-space: nowrap;
    text-align: center;
}

.hero-first {
    font-size: clamp(16px, calc(10vw - 1vw), 40px);
    line-height: 1.93;
    color: #FFF000;
	margin-bottom: clamp(-3%,-3vw,0%);
}

.hero-second {
    font-size: clamp(16px, calc(23vw - 1vw), 90px);
    margin-top:  clamp(-3%,-3vw,0%);;
    color: #FFF000;
}

.hero-therd {
    font-size: clamp(16px, calc(10vw - 1vw), 40px);
    margin-top: 0%; /*-4vw;*/
    color: #FFFFFF;
}

.hero-container {
	margin-top: 3%;
	
}
.hero-roundbox {
	font-family: var(--main-font);
	font-weight: 500;
	text-align: center;
    background-color: white;
    border-radius: 5vw;
    padding: 5px;
    margin: 0 2% 1% 2%;
}





.main-logo {
	width: 80%;
	margin: 0 auto;
	padding-top: 10%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

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

.h1-box {
	margin-top: 10%;
	width: 90%;
	background: #F76964 0% 0% no-repeat padding-box;
	border-radius: 11px;
	opacity: 1;
}

.genre-txt {
	margin-top: 15px;
	display: flex;
 	flex-wrap: wrap;
	text-align: center;
	justify-content: center; 
	align-items: center;
	color: white;
	font-family: var(--main-font);
	font-weight: 500;

 	
}

.genre-txt span {
	margin-right: 10px;
}

.h1-txt {
	display: flex;
 	flex-wrap: wrap;
	text-align: center;
	justify-content: center; 
	align-items: center;
	margin: 3% 0 4% 0;
	font-family: var(--main-font);
	font-size: 150%;
	font-weight: 600;
	color: #FFF7A4;
	
}

.parent-icon-text-container{
	display: grid;
	justify-content: center;
	align-content: center;
	margin: 5% 5% ;
}

.icon-text-container {
	font-family: var(--main-font);
	color: black;
	font-weight: 500;
	justify-content: center;
	align-content: center;
	gap: 5px; 
}

li.icon-text-container  {
	display: flex;
	align-content: center;
}


ul li.icon-text-container::before {
	content:url(megaphone.svg);
	display:inline-block;
	width:6%;
	min-width: 40px;
	max-width:40px ;
	margin-right:3%;
	position:relative;
	top: 3px;
	left:0;
}

.icon {
 	flex: 0 0 30px;
	margin: -0 10px 0 20px
}

.text {
	flex: 1 1 200px;
	font-size: 13px;
	margin:  0 ;
}

.parent-icon-text-container .icon-text-container:nth-of-type(2){
	margin-top: 10% ;
}

.sub-text {
	font-family: var(--main font) ;
	font-weight: 500;
    font-size: 10px;
	margin-left: 9%;
	
}

.rainbow-background-2 {
    position: relative;
  	padding-bottom: 0; 
    background: var(--hero-bg-gradient) 0% 0% no-repeat;
    opacity: 1;
	max-width: 1200px;
	margin: 0 auto;
}

.appeal-Point-container {
	width: 100%;
	padding: 20px;
	margin: 0 auto;
	box-sizing: border-box;
}

.appeal-Point-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.box {
  flex: 1;
  height: 40px;
  border: 2px solid white;
  border-radius:  5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--main font) ;
  font-weight: 500 ;
  text-align: center ;
  font-size: max(10px,10%);
  margin: 0 5px;
  color: white ;
}

.appeal-Point-box:last-child {
  justify-content: center;
}


.h2-txt {
	display: flex;
 	flex-wrap: wrap;
	text-align: center;
	justify-content: center; 
	align-items: center;
	margin: 3% 0 4% 0;
	font-family: var(--main-font);
	font-size: 150%;
	font-weight: 600;
	color: white;
}

.h3-text {
	background-color: #00AB9F ;
	max-width: 1200px ;
	margin: 0 auto ;
	margin-bottom: 0% ;
	padding: 3% 0 ;
	display: grid ;
	justify-content: center ;
	align-items:center ;
	font-family: var(--main-taxt) ;
	font-weight: 500 ;
	color: white ;
	font-size: 80% ;
}

.white-line  {
	border: none;
 	border-bottom: 2px solid #FFFFFF;
	border-radius: 4px ;
 	margin: 0 3% 0 3%;
}


.h3 {
	
	font-family: var(--main-font) ;
	color: white ;
	font-size: 120% ;
	text-align: center ;
	margin: 0% 0 5% 0 ;
}

ul {
  list-style: none;
  padding-left: 0; 
}

.h3-list li{
	text-align: center;
	margin: 3% 0 0 0 ;
}


.diamond-shape {
	width: 6%;
	height: auto;
	margin: 0 auto;
}


.h3-sub-text {
	display: grid;
	place-content: center;
	text-align: center ;
	color: #FFF362 ;
	font-family: var(--main-font) ;
	font-size: 120% ;
	font-weight: 500 ;
	line-height: 140%;
	margin: 3% 0 3% 0 ; 
	
}

.contact-box {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white ;
	max-width: 1200px ;
	margin: 0 auto;
	padding: 3% 0 ;
}

.contact-button {
	padding: 10px 40px;
	max-width: 300px ;
	background-color: #00AB9F;
	color: #fff;
	text-decoration: none;
	border-radius: 1000px;
	font-weight: 700;
	text-align: center;
	transition: background-color 0.3s;
}

.Illust-box {
	display: block;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background-color: #00AB9F ;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1% ;


}

.Illust-box-flex {
	display: flex;
	justify-content: center;
	align-content: center;
	margin-bottom: -6%;
}

.worry-image {
	padding: 5% 0 0 0;
	width: 90%;
	max-width: 500px;
	
}

.h4-text1{
	text-align: center;
	font-family: var(--main-font);
	font-weight: 700;
	color: #F8F163;
	font-size: 130%;
	margin: 8% 0;
}
.h4-text2{
	text-align: center;
	font-family: var(--main-font);
	font-weight: 700;
	color: #F8F163;
	font-size: 130%;
	margin-top: -8%;
}

.h5-text {
	display: flex;
 	flex-wrap: wrap;
	text-align: center;
	justify-content: center; 
	align-items: center;
	font-family: var(--main-font);
	font-weight: 500;
	font-size: 12px;
	color: white;
		
	}

.h4-box {
	display: flex;
	justify-content: center;
	align-content: center;
	background-color: white;
	height: auto;
	max-width: 1200px;
	margin: 0 auto;
	
}

.h4-text-any-place{
	text-align: center;
	font-family: var(--main-font);
	font-weight: 600;
	font-size: 130%;
	color:#23B6BC;
	
}

.long-box {
	display: block;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background-color: #00AB9F ;
	padding: 1% ;
	padding-bottom: 5%;
	max-width: 1200px;
	margin: 0 auto;
}


.anymedia-container {
	display: flex;
	justify-content: center;
	align-content: center;
	text-align: center;
	flex-wrap: nowrap;
}

.anymedia-container li {
	font-family: var(--main-font);
	font-weight: 500;
	font-size: 80%;
	margin: 0 1% ;
	padding: 1% 5%;
	background-color: #23B6BC;
	border-radius: 100px;
	color: white;
	border: 1.5px solid #FFFFFF;
	}

.etc-text {
	text-align: center;
	font-family: var(--main-font);
	font-weight: 500;
	color: white;
	margin: 0;
}


.h5-text-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	text-align: center;
	margin: 5% 0;
	color: white;
}

.h5-text-2-box {
	display: block;
	justify-content: center;
	align-content: center;
}

.h5-text-yellow-container {
	display: flex;
	justify-content: space-between;
	align-content: stretch;
	width: 100%;
	margin: 0;
}

.h5-text-yellow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	flex: 1;
	text-align: center;
	font-family: var(--main-font);
	font-weight: 500;
	color: #FFF362;
	margin: 0 1%;
}

.side-box {
	background-color: white;
	flex: 1;
	padding: 0% 5%;
	max-width: 0%;
	
}

.insta-bg {
	background-color: white;
	background-image: url('diagonal-lines-bg@2x.png');   
	height: auto;
	max-width: 1200px;
	margin: 0 auto ;
	width: 100%; 
	background-size: cover;
	background-repeat: no-repeat; 
}

h6 { margin: 0; }

.insta-box {
	display: block;
	justify-content: center;
	align-content: center;
	text-align: center;
	font-size:  200%;
	font-family: var(--main-font);
	font-weight: 300;
	color: white;
	background-color: #00AB9F;
	padding: 3% 0 ;
	margin:  5% 0 auto;
	}

.insta-box span  {
	color: yellow;
}

.instagram-media-cantiner {
	display: flex;
	justify-content: center;
	align-content: center;
}

.instagram-media {
    position: static !important;
}

.x-bg {
	background-color: white;
	height: auto;
	max-width: 1200px;
	margin: 0 auto ;
	width: 100%; 
	background-size: cover;
	background-repeat: no-repeat;
}

	


.x-box {
	display: block;
	justify-content: center;
	align-content: center;
	text-align: center;
	font-size: 200%;
	font-family: var(--main-font);
	font-weight: 300;
	color: yellow;
	background-color: #00AB9F;
	margin:  0 ;
	padding: 3% 0 ;
	
}
.gradation-line{
	border: none;
 	border-bottom: 2.5px solid ;
	border-image: linear-gradient(158deg, #F9C349 0%, #E84F58 25%, #997DB6 50%, #7BBEE9 75%, #2AB5AF 100%) 1;
	border-radius: 4px ;
 	margin: 0 3% 0 3%;
}

.x-worry-text {
	text-align: center;
	font-family: var(--main-font);
	font-weight: 500;
	font-size: 120%;
	color: #00AB9F;
	margin: 3% 0;
}

.x-ok-text {
	text-align: center;
	font-family: var(--main-font);
	font-weight: 500;
	font-size: 120%;
	color: #00AB9F;
	padding: 3% 0 ;
}

.empty-box {
	background-color: #00AB9F;
	padding: 5% 0;
}

.twitter-tweet-container {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	max-width: 1200px;
	margin: 0 auto;
}

.twitter-tweet {
}


@media screen and (min-width : 500px ){
	
	.hero-first {
		font-size: clamp(16px, calc(10vw - 1vw), 80px);
		line-height: 1.93;
		color: #FFF000;
		margin-bottom: -4%
	}

	.hero-second {
		font-size: clamp(16px, calc(23vw - 1vw), 150px);
		margin-top: -4% ; 
		color: #FFF000;
	}

	.hero-therd {
		font-size: clamp(16px, calc(10vw - 1vw), 80px);
		margin-top: 0%; /*-4vw;*/
		color: #FFFFFF;
	}

	
	.hero-container {
		display: flex;
		justify-content: center;
		width: 100%;
		max-width: 1200px; /* コンテナの最大幅を設定 */
		margin: 0 auto; /* コンテナを中央に配置 */
		margin-top: 2%
	}

	.hero-roundbox {
		display: flex;
		flex-direction: column ;
		justify-content: center;
		flex-basis: 33.33%;
		max-width: 300px;
		text-align: center;
		background-color: white;
		border-radius: 2vw;
		padding: 5px;
		margin: 0 1% 1% 1%;
	}

	.main-logo-bg{
	background-color: white;
	background-image: url('diagonal-lines-bg@2x.png');   
	height: auto;
	max-width: 1200px;
	margin: 0 auto ;
	width: 100%; 
	background-size: cover;
	background-repeat: no-repeat; 
}
	
	.icon-text-container {
	text-shadow: 5 5 5px white;
	}
	
	.anymedia-container {
		flex-wrap: nowrap;
	
	}
	
	.h2-txt {
		font-size: 200%;
		
	}
	
	.box {
 font-size: max(15px,10%);
	}
	
	.anymedia-container li {
		border: 2px solid #FFFFFF;

	}
	
	.h3-sub-text {
		font-size: 160%;
		
	}
	
	.main-logo {
	width: 40%;
	min-width: 300px;
	margin: 0 auto;
	margin-top: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	
	.h3{
	font-size: 170%;
	}
	
	.h3-list{
	font-size: clamp(12px,3vw,18px);
	margin:  0 0 auto;
		
	}
	
	
	.diamond-list-text{
	margin-left: 3% auto;
	}
	
	
	.diamond-list {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 auto;
}

	
	.diamond-shape {
	width: 70%;
	height: auto;
	margin: 0 auto;
		
	}
	
	.h4-text1, .h4-text2 {
	font-size: 140%;
	}
	
	.anymedia-container li {
	font-size: 100%;
	
	
	}
	
	.h5-text {
	font-size: 18px;
	}
	
	
}

@media screen and (min-width: 1024px) {
	
		.main-logo {
		width: 40%;
		margin-top: 3%;
		}

		.h1-box {
		margin-top: 4%;
		padding-top: 1% ;
		width: 70%;
		max-width: 800px;
		background: #F76964 0% 0% no-repeat padding-box;
		border-radius: 11px;
		opacity: 1;
	}
		.anymedia-container li {
		font-size: 120%;

	}

		.h3{
			font-size: 200%;
		}


		.h4-text1, .h4-text2 {
			font-size: 200%;


		}


		.h3-list{
				font-size: 140%;
				margin:  0 auto;
			}

		.x-bg {
			background-color: white;
			max-width: 1200px;
			margin: 0 auto;
		}

		}