/* ========== 共通 ========== */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
	--c_main: #333333;
	--c_base: #ffffff;
	--c_font: #333333;

	--c_link: #ff3366;
	--c_hover: #ffff66;
}


html {
	font-family:"Nunito Sans", "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", 'Noto Sans JP',  serif, -apple-system,BlinkMacSystemFont, sans-serif;
	font-size:calc(100vw / 32);
	font-weight: 500;
	color: var(--c_font);
	background-color: #ffffff;
	margin: 0 auto;
	padding: 0;
	min-width: 320px;

	scroll-behavior:smooth;
	-webkit-scroll-behavior:smooth;
	overscroll-behavior-y:contain;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	overflow-x: hidden;
	word-break: break-all;
}

body, header, section, footer {
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5 {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
a:not([class]) {
	text-decoration: underline;
	color: var(--c_link);
	transition: all 0.25s ease-out 0s;
	opacity: 1;
}
a:not([class]):hover {
	opacity: 0.8;
	text-decoration: none;
	text-shadow: 0 0 0.25em var(--c_link);
}

body {
	position: relative;
	margin: 0 auto;
	text-align: center;

	transition: all 0.5s ease-out 0s;
}

/* ================================================== */
/* ==================== header ==================== */
/* ================================================== */
header {
	position: relative;
	aspect-ratio: 78 / 130;
	z-index: 0;
	overflow: hidden;
}
header::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background-color: #CEEEFF;
	z-index: -2;
}
header::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	mask-image: url("../img/cross.svg");
	-webkit-mask-image: url("../img/cross.svg");
	mask-size: 50%;
	mask-repeat: repeat;
	mask-position: left;
	background-color: #FFFFFF;
	z-index: -2;
}
header .deco {
	position: absolute;
	inset: 0;
}
header .deco::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/main_t.png") no-repeat;
	background-position: left top;
	background-size: 100%;
}
header .deco::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background: url("../img/main_b.png") no-repeat;
	background-position: left bottom;
	background-size: 100%;

	transform: translateX(-2%);
}

#top1,
#top2,
#top3,
#top4,
#top_ring,
#top_num {
	position: absolute;
	width: 24%;
	top: auto;
	left: auto;
	bottom: 7.4%;
	right: 5%;
	z-index: 3;
}
#top2 {
	width: 27.4%;
	bottom: 0%;
	right: 17%;
}
#top3 {
	width: 13.4%;
	bottom: 22.2%;
	right: 72.6%;
}
#top4 {
	width: 11.4%;
	bottom: 40.2%;
	right: 60.8%;
}
#top_ring {
	width: 48%;
	top: -15%;
	right: 14%;
	z-index: 1;
}
#top_num {
	width: 23.6%;
	bottom: 4%;
	left: -1.5%;
	z-index: 4;
}

#logo {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 25vw;
	z-index: 1;
}
header h1 {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: url("../img/main_sp.png") no-repeat;
	background-position: 50% 75%;
	background-size: 80% auto;
}
header h1 picture {
	display: block;
	position: absolute;
	top: 20vw;
	left: 10vw;
	right: auto;
	bottom: auto;
	width: 70%;
}
header h1 img {
	width: 100%;
}


section {
	margin-bottom: 4rem;
	font-size: 1.0em;
	line-height: 1.75em;
}
section h2{
	margin-bottom: 2rem;
}
section p{
	text-align: left;
}
#main_wrapper {
	position: relative;
	overflow: clip;
}
/* ================================================== */
/* ==================== point ==================== */
/* ================================================== */
#point {
	max-width: 1200px;
	padding: 2rem 4rem;
	margin: auto;
}
#point h3{
	margin-top: 2rem;
	margin-bottom: 2rem;
}
#point ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	place-items: center;
	margin-bottom: 2rem;
}
#point li {
	position: relative;
	width: 100%;
	aspect-ratio: 10 / 9;
}
#point li:nth-of-type(1) {
	width: calc(50% - 1rem);
	background: url("../img/point_01.png") no-repeat;
	background-size: contain;
	grid-column: span 2 / span 2;
}
#point li:nth-of-type(2) {
	background: url("../img/point_02.png") no-repeat;
	background-size: contain;
}
#point li:nth-of-type(3) {
	background: url("../img/point_03.png") no-repeat;
	background-size: contain;
}

#point li img{
	position: absolute;
	display: block;
}
#point li img:first-of-type {
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	height: 40%;
}
#point li:nth-of-type(1) img:first-of-type {
	left:-1.5rem;
	bottom: 1rem;
	height: 46%;
}
#point li:nth-of-type(2) img:first-of-type {
	right:-0.5rem;
	bottom: 0rem;
}
#point li:nth-of-type(3) img:first-of-type {
	right: 0rem;
	bottom: 0rem;
}

#point li img:last-of-type {
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: 72%;
}
#point li:nth-of-type(1) img:last-of-type {
	width: 76%;
	left: 0.8rem;
	top: 3.0rem;
}
#point li:nth-of-type(2) img:last-of-type {
	left: 1.3rem;
	top: 1.5rem;
}
#point li:nth-of-type(3) img:last-of-type {
	left: 1.2rem;
	top: 1.7rem;
}

#point p {
	text-align: left;
	text-align: justify;
}

/* ============================================== */
/* ==================== main ==================== */
/* ============================================== */
main {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1rem 2rem;

	background-color: #FFFFFF;
	border-radius: 1rem;
	border: #CEEEFF solid 2em;
	border-top-width: 2.5em;
	box-sizing: border-box;
}
main::before,
main::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
}
main::before {
	background: url("../img/line_t_sp.svg") no-repeat;
	background-size: contain;
	top: -3.1rem;
	aspect-ratio: 103 / 22;
} 
main::after {
	background: url("../img/line_b.svg") no-repeat bottom;
	background-size: 100%;
	bottom: 0;
	aspect-ratio: 1113 / 4;
} 

/* ======================================================== */
/* ==================== countermeasure ==================== */
/* ======================================================== */
#countermeasure {
	padding: 0 1rem;
}
#countermeasure h2 {
	margin: 2rem 0;
}
#countermeasure h3 {
	color: #223F9A;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0.25em 0;
}
#countermeasure h3 span {
	position: relative;
	color: #F5821F;
	padding: 0 0.4em;
}
#countermeasure h3 span::after {
	content: "";
	position: absolute;
	color: #F5821F;
	top: -0.2em;
	left: -0.3em;
	width: 140%;
	height: 125%;
	background: url("../img/point_mark.svg") no-repeat;
	background-size: contain;
	z-index: -2;
}
#countermeasure ul {
	display: grid;
	grid-template-columns: 0.75fr;
	text-align: left;
	margin: 4rem 0;
	gap: 2rem;
}
#countermeasure li {
	position: relative;
}
#countermeasure li::after {
	content: "";
	position: absolute;
	display: block;
	top: -4rem;
	bottom: auto;
	left: 105%;
	right: auto;
	width: 34%;
	aspect-ratio: 120 / 162;
	background: url("../img/time01.png") no-repeat;
	background-size: contain;
}
#countermeasure li:nth-of-type(2):after {
	background: url("../img/time02.png") no-repeat;
	background-size: contain;
}
#countermeasure li:nth-of-type(3):after {
	background: url("../img/time03.png") no-repeat;
	background-size: contain;
}
#countermeasure li:nth-of-type(4):after {
	background: url("../img/time04.png") no-repeat;
	background-size: contain;
}
#countermeasure h5 {
	position: relative;
	border-bottom: solid 1px #333333;
	line-height: 1em;
	padding: 0 0.5rem;
	left: -0.5rem;
	width: calc(100% + 1rem);
	font-weight: bold;
}
#countermeasure mark {
	position: relative;
	color: #223F9A;
	background-color: #CEEEFF;
	font-size: 0.8em;
	font-weight: normal;
	padding: 0.4em 0.4em 0em;
	z-index: -1;
}
#countermeasure strong {
	font-size: 1.5em;
	font-weight: bold;
    color: #fde047;
	padding-left: 0.2em;
	letter-spacing: 0.1em;
	text-shadow: 
        1.5px  1.5px 0 #223F9A,
       -1.5px  1.5px 0 #223F9A,
        1.5px -1.5px 0 #223F9A,
       -1.5px -1.5px 0 #223F9A,
        1.5px  0px   0 #223F9A,
       -1.5px  0px   0 #223F9A,
        0px    1.5px 0 #223F9A,
        0px   -1.5px 0 #223F9A;
}
#countermeasure mark img {
	height: 1em;
	vertical-align: -0.1em;
	margin: 0 0.4em 0em 0.6em 
}

#countermeasure h6 {
	color: #223F9A;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0.25em 0;
}
#countermeasure h6 span {
	color: #F5821F;
}
#countermeasure li p {
	font-size: 0.8em;
	line-height: 1.4em;
	text-align:justify;
}


/* ====================================================== */
/* ==================== confirmation ==================== */
/* ====================================================== */
#confirmation {
	padding: 0 1rem;
}
#confirmation p {
	margin-bottom: 1rem;
}

#confirmation ul {
	display: grid;
	grid-template-columns: 1fr;
}
.btn2 {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	padding: 0.8em 1em;
	margin-top: 1rem;
	background-color: #FFE75A;
	border: #223F9A solid 1px;
	border-radius: 10em;
	filter: drop-shadow( 0.4rem 0.4rem 0 #223F9A);
	transition: all 0.25s ease-out 0s;
	will-change: filter;
}
.btn2::after {
	content: "";
	display: block;
	position: absolute;
	right: 0.7em;
	top: 0.5em;
	width: 1.6em;
	height: 1.6em;
	background: url("../img/arrow_link.svg") no-repeat;
	background-size: contain;
	transition: all 0.25s ease-out 0s;
	opacity: 1;
}
.btn2:hover {
	top: 0.2rem;
	left: 0.2rem;
	filter: drop-shadow( 0.2rem 0.2rem 0 #223F9A);
	color: #F5821F;
}
.btn2:hover::after {
	opacity: 0.6;
}

/* ================================================ */
/* ==================== others ==================== */
/* ================================================ */
#others {
	padding: 0 1rem;
	margin-bottom: 0;
}
#others p{
	font-weight: bold;
}

#others div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 2rem 0;
}
#others .btn {
	position: relative;
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	box-sizing: border-box;
	width: calc(100% - 1rem);
}
#others .btn span {
	position: relative;
	display: block;
	inset: 0;
	padding: 0.75em;
	border: #707070 solid 1px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	z-index: 2;
	transition: all 0.25s ease-out 0s;
}
#others .btn span::after {
	content: "";
	position: absolute;
	display: block;
	right: 0.6em;
	top: 0.6em;
	width: 1.5em;
	height: 1.5em;
	background-color: #76479D;
	mask-image: url("../img/arrow_1.svg");
	-webkit-mask-image: url("../img/arrow_1.svg");
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: center;
	transition: all 0.25s ease-out 0s;
}
#others .btn::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0.8rem;
	left: 0.8rem;
	background-color: #f0f0f0;
	border: #707070 solid 1px;
	box-sizing: border-box;
	z-index: 1;
	transition: all 0.25s ease-out 0s;
}
#others .btn:hover span {
	left: 0.4rem;	
}
#others .btn:hover::after {
	left: 0.6rem;
}
#others .btn:hover span::after {
	right: 0.2em;
}

#others .btn:nth-of-type(1) {
	color: #76479D;
}
#others .btn:nth-of-type(1)::after {
	background-color: #B688DD;
}
#others .btn:nth-of-type(2) {
	color: #4A9D83;
}
#others .btn:nth-of-type(2) span::after {
	background-color: #4A9D83;
}
#others .btn:nth-of-type(2)::after {
	background-color: #61C9A8;
}
#others .btn:nth-of-type(3) {
	color: #3B85AC;
}
#others .btn:nth-of-type(3) span::after {
	background-color: #3B85AC;
}
#others .btn:nth-of-type(3)::after {
	background-color: #9ED8F7;
}
#others .btn:nth-of-type(4) {
	color: #F5821F;
}
#others .btn:nth-of-type(4) span::after {
	background-color: #F5821F;
}
#others .btn:nth-of-type(4)::after {
	background-color: #FFC18B;
}
#others .btn:nth-of-type(5) {
	color: #AF5656;
}
#others .btn:nth-of-type(5) span::after {
	background-color: #AF5656;
}
#others .btn:nth-of-type(5)::after {
	background-color: #FFB7B7;
}
#others .btn:nth-of-type(6) {
	color: #74A24E;
}
#others .btn:nth-of-type(6) span::after {
	background-color: #74A24E;
}
#others .btn:nth-of-type(6)::after {
	background-color: #C1EA9F;
}

hr {
	border: none;
	border-top: dashed 2px #323232;
	margin-bottom: 4rem;
}

.yt_title {
	margin-bottom: 1rem;
}
.yt_box {
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	max-width: 920px;
}
.yt_box iframe {
	width: 100%;
	height: 100%;
}

/* ================================================ */
/* ==================== footer ==================== */
/* ================================================ */
footer {
	margin-top: 2rem;
	background-color: #223F9A;
	color: #FFFFFF;
	padding: 3em;
}

/* ========== on off ========== */
.sp {
	display: initial;
}
.pc {
	display: none;
}
br.sp {
	display: inline;
}

/* =================================================== */
/* ==================== 900px以上 ==================== */
/* =================================================== */
@media (min-width: 980px) {
html {
	font-size: 10px;	/* 10pxを基準に変更 */
}
body {
	font-size: 2em;
}

header {
	aspect-ratio: 1920 / 670;
}
header::after {
	mask-size: 20% auto;
}
header .deco::before {
	background: url("../img/main_l.png") no-repeat;
	background-position: left bottom;
	background-size: auto 100%;
}
header .deco::after {
	background: url("../img/main_r.png") no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
}
#top1 {
	width: 10%;
	bottom: 2%;
	right: 17%;
}
#top2 {
	width: 9%;
	bottom: 6.8%;
	right: 27%;
}
#top3 {
	width: 6.4%;
	bottom: 37.4%;
	right: 59.2%;
}
#top4 {
	width: 5%;
	bottom: 39%;
	right: 34.7%;
}
#top_ring {
	width: 19%;
	top: -28%;
	right: 54%;
}
#top_num {
	width: 9%;
	bottom: 2.8%;
	left: 27.2%;
}

#logo {
	width: 10vw;
	left: 1vw;
	top: 1vw;
}
header h1 {
	background-image: url("../img/main.png");
	background-position: 73% 46%;
	background-size: auto 92%;
}
header h1 picture {
    top: 7%;
    left: 20%;
    width: 36%;
}


/* ========== point ========== */
#point {
	padding: 0;
	max-width: 960px;
	margin-bottom: 120px;
}
#point h3{
	margin-top: 30px;
	margin-bottom: 30px;
}
#point ul {
	grid-template-columns: 1fr 1fr 1fr;
}

#point li {
	aspect-ratio: 10 / 8;
}

#point li:nth-of-type(1) {
	width: 100%;
	grid-column: unset;
	background-position: top right;
}
#point li:nth-of-type(2) {
	background-position: top right;
}
#point li:nth-of-type(3) {
	background-position: top right;
}
#point li img:first-of-type {
	height: 40%;
}
#point li:nth-of-type(1) img:first-of-type {
	left:-12px;
	bottom: 10px;
	height: 46%;
}
#point li:nth-of-type(2) img:first-of-type {
	left:-12px;
	bottom: 10px;
	right:unset;
	height: 46%;
}
#point li:nth-of-type(3) img:first-of-type {
	left:-12px;
	bottom: 10px;
	right:unset;
	height: 46%;
}
#point li:nth-of-type(1) img:last-of-type {
    width: 66%;
    left: 60px;
    top: 80px;
}
#point li:nth-of-type(2) img:last-of-type {
    width: 60%;
    left: 74px;
    top: 38px;
}
#point li:nth-of-type(3) img:last-of-type {
    width: 62%;
    left: 68px;
    top: 42px;
}
#point p {
	line-height: 1.8em;
}

/* ========== main ========== */
main {
	border-width: 60px;
	padding: 60px;
	border-radius: 20px;

}
main::before {
	background: url("../img/line_t.svg") no-repeat;
	background-size: contain;
	top: -74px;
} 


section {
    margin-bottom: 80px;
}
#countermeasure {
    padding: 0 20px;
}
#countermeasure h2 {
    margin: 60px 0;
}
#countermeasure ul {
	grid-template-columns: 0.85fr;
	margin: 40px 0;
	gap: 60px;
}
#countermeasure li::after {
	top: -42px;
	left: 105%;

	width: 82px;
	aspect-ratio: 82 / 110;
}
#countermeasure ul h5 {
    left: -20px;
    padding: 0 20px;
    width: calc(100% + 20px);
	font-size: 1.4em;
}
#countermeasure mark img {
	vertical-align: -2px;
}
#countermeasure ul h6 {
	font-size: 1.6em;
	margin-bottom: 20px;
}
#countermeasure ul p {
	line-height: 1.8em;
}

.yt_title {
	margin-bottom: 20px;
}
.yt_box {
	margin: 0px auto 40PX;
}
#confirmation .yt_box {
	margin-top: 40px;
}

.btn2 {
	font-size: 1.6em;
	max-width: 550px;
	margin: auto;
	filter: drop-shadow(10px 10px 0 #223F9A);
}
.btn2:hover {
	top: 5px;
	left: 5px;
	filter: drop-shadow( 5px 5px 0 #223F9A);
}

#others div {
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	margin: 40px 0;
}

hr {
	margin-bottom: 80px;
}

/* ========== footer ========== */
footer {
	margin-top: 80px;
	font-size: 1.6rem;
}
/* ========== on off ========== */
.sp {
	display: none;
}
.pc {
	display: initial;
}
br.sp {
	display: none;
}

}

@media (min-width: 1280px) {
}
@media (min-width: 1300px) {

#to_top {
	position: sticky;
	display: block;
	width: 180px;
	height: 180px;
	bottom: 10px;
	margin-right: 10px;
	margin-left: auto;
	margin-top: -180px;

	overflow: hidden;
	animation: move_-y 0.5s both 2s;
}
#to_top::before {
	content: "";
	position: absolute;
	display: block;
	inset: 0;
	background: url("../img/to_top.png") no-repeat;
	background-position: center;
}
#to_top::after {
	content: "";
	position: absolute;
	display: block;
	inset: 0;
	background: url("../img/to_top1.png") no-repeat;
	background-position: center;
}

}
@media (min-width: 1920px) {

}

/* ========== safari用 ========== */
@supports (-webkit-touch-callout: none) {
header h1 {
	background-position: 50% 73%;
}
#countermeasure li::after {
	top: -3.4rem;
}

@media (min-width: 900px) {

}

}

/* ========== firefox用 ========== */
@-moz-document url-prefix(){
}