@charset "UTF-8";

@import url('./layout.css?1');

/* Variables */
:root {
	--header--height: 10rem;
	--header--height--sp: 6rem;
	--header--logo--height: 8rem;
	--header--logo--height--sp: 4rem;
	--footer--copyright--height: 7rem;


	/* color */
	--color--black: #333333;
	--color--red: #cc0000;
	--color--white: #ffffff;
	--color--lightgray: #cccccc;
	--color--green: #2B7471;
	--color--blue: #004096;
	--color--lightblue: #eff1fc;
	--color--yellow: #ffe33f;
}

html,body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--color--black);
}

body{ overflow-x: hidden; }

section, .wrapper, .relative{ position: relative; }

.disnone{ display: none; }
.inner{ max-width: 105rem; padding: 0 1rem; margin: 0 auto; }



/* header */
header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
header .header-inner{ padding: 3rem 3.5rem; }


.message .ph img{ max-width: 100%; width: 100%; }



.promise-contents{ margin-left: 14rem; margin-top: 2rem; }

.promise-contents ul li{ display: flex; }
.promise-contents ul li::before{ content: "・"; }
.promise-contents ul li:not(:last-child){ margin-bottom: 2rem; }


footer{ background-color: var(--color--lightblue); padding: 5rem 0; }

footer .sns{ display: flex; justify-content: center; }
footer .sns li{ width: 19.5%; }
footer .sns li:not(:last-child){ margin-right: 0.625%; }

footer .sns li a{ display: flex; flex-direction: column; width: 100%; height: 13rem; border-radius: .8rem; background-color: var(--color--white); align-items: center; justify-content: center; }
footer .sns li a span{ font-size: 1.4rem; font-weight: 900; line-height: 1.4; text-align: center; }

footer .sns li a span.i{ display: flex; height: 4rem; align-items: center; justify-content: center; margin-bottom: 1.2rem; }

footer .sns li a:hover{ transform: translateY(-1rem); }


/* main */
section.main{ overflow: hidden; }
section.main .cover{ position: absolute; left: 0; top: 0; height: 100%; }
section.main .cover img{ max-height: 100%; }
section.main .bg{ width: 100%; }
section.main .bg img{ width: 100%; }

/* youtube */
.youtube-message{ padding: 7rem 0 5.5rem 0; font-style: italic; }

.youtube-message .inner{ position: relative; z-index: 0; }

section.youtube .youtube-message p{ font-size: 4rem; font-style: italic; line-height: 1.4; font-weight: 900; text-align: center; }
section.youtube .youtube-message p span{ font-size: 5rem; padding: 0 .5rem; }

section.youtube .youtube-load{ line-height: 0; }
section.youtube .youtube-load iframe{ width: 100%; height: 100%; aspect-ratio: 16 / 9; }

section.youtube .youtube-message p:nth-child(2){ font-size: 5rem; }
section.youtube .youtube-message p:nth-child(2) strong{ font-size: 6.8rem; font-style: italic; color: var(--color--blue); }
section.youtube .youtube-message p:nth-child(2) span{ background: linear-gradient(transparent 70%, var(--color--yellow) 70%); }

section.youtube .youtube-message::before{
	    content: "";
	   position: absolute;
	     bottom: 0;
	       right: 0;
	      width: 0;
	     height: 0;
	 border-top: 250px solid transparent;
	border-right: 38vw solid var(--color--blue);
	    z-index: 0;
}

section.youtube .youtube-message p:nth-child(2) strong{ font-size: 4.7rem; }

.youtube-message{ padding: 3.5rem 0 3.5rem 0; }
section.youtube .youtube-message::before{ border-top: 10vw solid transparent; }


section.youtube .youtube-message p{ font-size: 2.75rem; }

section.youtube .youtube-message p:nth-child(2),
section.youtube .youtube-message p span{ font-size: 3.5rem; }





/* voice */
section.voice{ background-color: var(--color--lightblue); padding: 11rem 0 8rem 0; }
section.voice h3{ font-size: 5rem; font-style: italic; font-weight: 900; position: relative; text-align: center; line-height: 2.4; margin-bottom: 4rem; }
section.voice h3::after{ content: ""; width: 4rem; height: 1rem; background-color: var(--color--blue); position: absolute; left: calc(50% - 2rem); bottom: 0; }

section.voice h4{ text-align: center; font-style: italic; font-size: 3rem; color: var(--color--blue); font-weight: 900; }
section.voice .voice-inbox{ background-color: var(--color--white); border-radius: .8rem; box-shadow: 0px 5px 15px 0px rgba(0, 64, 135, 0.15); position: relative; padding: 5rem 8rem; margin-top: 3rem; }

section.voice .voice-inbox *{ font-weight: 900; font-size: 2.2rem; line-height: 2; }

section.voice .voice-inbox p:not(:last-child){ margin-bottom: 3rem; }
section.voice .voice-inbox span{ display: block; color: var(--color--blue); }





/* message */
section.message{ margin-top: -.1rem; }
section.message .inner{ max-width: 57rem; padding: 9rem 0 11rem 0; }
section.message .message-inbox{ text-align: center; }
section.message .message-inbox::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 270px solid transparent;
	border-left: 500px solid var(--color--blue);
	z-index: 0;
}
section.message .message-inbox::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-bottom: 270px solid transparent;
	border-right: 500px solid var(--color--blue);
	z-index: 0;
}
section.message .message-inbox .c01,
section.message .message-inbox .c02{ font-size: 5rem; color: var(--color--blue); font-style: italic; line-height: 2; }
section.message .message-inbox .c02{ font-size: 6rem; background: linear-gradient(transparent 70%, var(--color--yellow) 70%); line-height: 1.2; margin-top: 1rem; }





/* promise */
section.promise{ background-color: var(--color--lightblue); padding: 11rem 0 8rem 0; }
section.promise h2{ text-align: center; font-size: 5rem; font-style: italic; }
section.promise h2 strong{ font-size: 8rem; font-style: italic; padding: 0 .5rem; line-height: 1; }

section.promise h3{ text-align: center; font-style: italic; font-size: 5rem; color: var(--color--blue); }
section.promise h4{ position: relative; margin-bottom: 4rem; }
section.promise h4::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    border-radius: 3px;
    background-color: var(--color--yellow);
    transform: skewX(-15deg);
}
section.promise h4 span{     position: relative;
    z-index: 1;
    text-align: center;
    display: block;font-size: 3rem; font-style: italic; color: var(--color--blue); }


section.promise .promise-box:not(:last-child){ margin-bottom: 3rem; }

section.promise .promise-title{ background-color: var(--color--white); border-radius: .8rem; box-shadow: 0px 5px 15px 0px rgba(0, 64, 135, 0.15); position: relative; }
section.promise .promise-title .midashi{ padding: 3rem 10rem 3rem 3rem; font-size: 2.5rem; font-style: initial; display: flex; text-align: left; align-items: center; font-weight: 900; line-height: 1.4; }
section.promise .promise-title .midashi span{ font-size: 7rem; line-height: 1; margin-right: 2.5rem; font-style: italic; background: linear-gradient(transparent 80%, var(--color--yellow) 80%); }


section.promise .promise-title .open{ display: flex; width: 4.5rem; height: 4.5rem; border: var(--color--blue) 1px solid; border-radius: 10rem; position: absolute; top: calc(50% - 2.75rem); right: 20px; }

section.promise .promise-title .open span{ transition: all .4s; }
section.promise .promise-title .open span:nth-child(1){ width: 1.8rem; height: .2rem; background-color: var(--color--blue); position: absolute; top: calc(50% - .1rem); left: calc(50% - .9rem); }
section.promise .promise-title .open span:nth-child(2){ width: 1.8rem; height: .2rem; background-color: var(--color--blue); position: absolute; top: calc(50% - .1rem); left: calc(50% - .9rem); transform: rotate(90deg); }

section.promise .promise-title.active .open span:nth-child(2){ transform: rotate(0deg); }





section.promise::before{
	 content: "";
    position: absolute;
	  bottom: 0;
	   right: 0;
	   width: 0;
	  height: 0;
  border-top: 35vw solid transparent;
border-right: 78vw solid var(--color--blue);
	 z-index: 0;
}

section.promise .slider{ margin-top: 11rem; }
section.promise .slider img{ width: 100%; }



/* profile */
section.profile{ min-height: 113.4rem; }
section.profile ul{ position: absolute; left: 0; z-index: 0; }





section.profile::before{
	content: "";
   position: absolute;
	z-index: 0;
	 bottom: 0;
	   left: 0;
	  width: 0;
	 height: 0;
 border-top: 30vw solid transparent;
border-left: 60vw solid var(--color--blue);
}


.promise-inbox-inline p,
.promise-inbox-inline ul{ padding-left: 3.6rem; }

.promise-inbox-inline:not(:last-child){ margin-bottom: 2rem; }

.promise-contents .promise-inbox-inline ul li:not(:last-child){ margin-bottom: 0; }

section.profile .profile-box{ position: relative; z-index: 1; }
section.profile .profile-box .inner{ display: flex; justify-content: flex-end; }



.promise-inbox{ background-color: var(--color--white); padding: 3rem; margin-top: 2rem; }

section.profile .profile-box .profile-inbox{ padding: 12rem 0 10rem 0; }
section.profile .profile-box .profile-inbox h3{ font-size: 5rem; font-style: italic; font-weight: 900; position: relative; display: inline-block; line-height: 2.4; margin-bottom: 4rem; }
section.profile .profile-box .profile-inbox h3::after{ content: ""; width: 4rem; height: 1rem; background-color: var(--color--blue); position: absolute; left: calc(50% - 2rem); bottom: 0; }

section.profile .profile-box .profile-inbox .name{ font-weight: 900; font-size: 3rem; }
section.profile .profile-box .profile-inbox .name span{ font-size: 2rem; }

section.profile .profile-box .profile-inbox .title{ text-align: center; position: relative; margin-top: 2rem; padding: 1rem 3rem; margin-left: -2rem; color: var(--color--blue); font-weight: 900; }
section.profile .profile-box .profile-inbox .title::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 3px;
    background-color: var(--color--lightblue);
    transform: skewX(-15deg);
}

section.profile .profile-box .profile-inbox .like{ margin-top: 2.5rem; }

section.profile .profile-box .profile-inbox .history{ margin-top: 4rem; }
section.profile .profile-box .profile-inbox .history dl{ display: flex; margin-bottom: 1rem; }
section.profile .profile-box .profile-inbox .history dl dt{ color: var(--color--blue); font-weight: 900; display: flex; justify-content: space-between; width: 10rem; }
section.profile .profile-box .profile-inbox .history dl dt::after{ content: "-"; color: var(--color--black); }
section.profile .profile-box .profile-inbox .history dl dd{ padding-left: 1.5rem; }






section.main .catch{ 
    position: absolute;
    top: 0;
	width: 100%;
    height: 100%; }

	
section.main .inner{ max-width: 140rem; height: 100%; display: flex; align-items: center; }
section.main .catch h1{ font-size: 13.7rem; color: var(--color--white); font-style: italic; line-height: 1.2; display: flex; flex-direction: column; }
section.main .catch h1 span{ position: relative; color: var(--color--blue); font-size: 3.3rem; font-weight: 900; margin-top: 2rem; }
section.main .catch h1 span::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    border-radius: 3px;
    background-color: var(--color--yellow);
    transform: skewX(-15deg);
	height: 6rem;
}
section.main .catch h1 span strong{ position: relative; text-align: center; display: block; font-style: italic; padding: 1rem 0; font-weight: 900; }





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

	section.main .catch{ margin-top: 3vw; }
	section.main .catch h1{ font-size: 11vw; }

	section.main .catch h1 span{ font-size: 3vw; }
	section.main .catch h1 span::before{ height: 6vw; }

	section.message .message-inbox::before{ border-top: 10vw solid transparent; border-left: 50vw solid var(--color--blue); }

		section.message .message-inbox::after{     border-bottom: 10vw solid transparent;
			border-right: 50vw solid var(--color--blue); }

	section.profile ul.profiles{ width: 40vw; }
	section.profile ul.profiles img{ width: 100%; }
}






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

	.profile .wrapper{ display: flex; flex-direction: column-reverse; }
	section.profile ul.profiles{ width: 100%; display: flex; position: relative; }

	section.profile .profile-box .inner{ justify-content: center; }

	section.promise h2{ font-size: 4rem; }
}





@media screen and (min-width: 767px) {
	.sp{ display: none !important; }
}





@media screen and (max-width: 766px) {
	.promise-contents{ margin-left: 0; }

	.pc{ display: none !important; }


	.profile .wrapper{ display: block; }
	
	/* header */
	header .header-inner{ padding: 1.5rem 0 0 1.5rem; }
	header .logo{ height: 3.5rem; }
	header .logo img{ height: 100%; }


	/* voice */
	section.voice{ padding: 3rem 0 4rem 0; }
	section.voice h3{ font-size: 2.5rem; margin-bottom: 1rem; }
	section.voice h3::after{ width: 2rem; height: .5rem; left: calc(50% - 1rem); }
	section.voice h4{ font-size: 2rem; }

	section.voice .voice-inbox{ margin-top: 1.5rem; padding: 2rem 2rem; }
	section.voice .voice-inbox *{ font-size: 1.8rem; }


	section.promise .slider{ margin-top: 5rem; }

	section.message .inner{ padding: 5rem 0; }

	section.profile .profile-box .inner{ justify-content: center; }



	section.promise .promise-title .open{ top: 1rem;  width: 3.6rem;
		height: 3.6rem;}


	section.promise h2{ font-size: 2.5rem; }

	section.message .message-inbox .c01,
	section.message .message-inbox .c02{ font-size: 3.2rem; display: inline-block; line-height: 1.6; font-weight: 900; }
	section.message .message-inbox .c02{ font-size: 3.8rem; }


	section.message .message-inbox::before{ border-top: 50px solid transparent; border-left: 100px solid var(--color--blue); }
	section.message .message-inbox::after{ border-bottom: 50px solid transparent; border-right: 100px solid var(--color--blue); }

	section.promise{ padding: 5rem 0 4rem 0; }


	/* profile */
	section.profile::before{ border-top: 82vw solid transparent; border-left: 100vw solid var(--color--blue); }
	section.profile .profile-box .inner{ padding: 0 4.5rem; }

	section.profile .profile-box .profile-inbox{ padding: 2rem 0 5rem; }

	section.profile .profile-box .profile-inbox .name{ text-align: center; font-size: 2.2rem; }
	section.profile .profile-box .profile-inbox .name span{ font-size: 1.6rem; }

	section.profile .profile-box .profile-inbox .title{ font-size: 1.4rem; }
	section.profile .profile-box .profile-inbox .title::before{ margin-left: -1rem; }

	section.profile .profile-box .profile-inbox h3{ font-size: 2.5rem; margin-bottom: 3rem; display: flex; justify-content: center; }
	section.profile .profile-box .profile-inbox h3::after{ width: 2rem; height: .5rem; left: calc(50% - 1rem); }

	section.profile .profile-box .profile-inbox .history dl{ flex-direction: column; }
	section.profile .profile-box .profile-inbox .history dl dt{ width: 8rem; }
	section.profile .profile-box .profile-inbox .history dl dd{ padding-left: 0; }

	section.profile .profile-box .profile-inbox .history dl *{ font-size: 1.5rem; }


	section.profile .profile-box .profile-inbox .like{ font-size: 1.4rem; }

	section.profile ul{ position: relative; }
	section.profile ul li img{ width: 100%; }

	section.promise h3{ font-size: 3.5rem; }

	section.promise h4::before{ display: none; }
	section.promise h4 span{ font-size: 1.6rem; }

	section.promise .promise-title .midashi{ flex-direction: column; padding: 3rem 1rem; font-size: 1.7rem; text-align: center; }

	section.promise .promise-title .midashi span{ font-size: 3.5rem; margin-right: 0; margin-bottom: 1.5rem; }

	

	/* footer */
	footer{ padding: 3.5rem 0; }
	footer .inner{ padding: 0 2.5rem; }

	footer .sns{ flex-wrap: wrap; }

	footer .sns li:nth-child(1), footer .sns li:nth-child(2), footer .sns li:nth-child(3){ width: 32%; }
	footer .sns li:nth-child(1), footer .sns li:nth-child(2){ margin-right: 2%; }
	footer .sns li:nth-child(3){ margin-right: 0; }
	footer .sns li:nth-child(4), footer .sns li:nth-child(5){ width: 49%; margin-top: 2%; }
	footer .sns li:nth-child(4){ margin-right: 2%; }

	footer .sns li a span{ font-size: 1.2rem; }
	footer .sns li a span.i{ height: 3rem; }
	footer .sns li a span.i img{ height: 100%; }
	
}