@charset "UTF-8";

/*
Theme Name: popchild
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.6
Requires PHP: 5.6.2
Version: 20250320.003
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/



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



/* Variables */

:root {
	--color--white: #ffffff;
	--color--footer: #fcf2e5;
	--color--nearwhite: #efefef;
	--color--black: #000000;
	--color--semiblack: #222222;
	--color--green: #92d050;
	--color--orange: #ed7d31;
	--color--blue: #1e90ff;
	--color--semiorange: #fdcd81;
	--color--darkorange: #cd5d11;
	--color--lightgray: #cccccc;
	--color--pink: #fe599e;
	--color--darkpink: #de397e;
	--color--bggreen: #ECF4D9;
	--color--bgpink: #FFF0F5;
	--color--bgorange: #fef3e5;
	--color--bgblue: #f0ffff;
	--global--admin-bar--height: 0px;
	--header--width: 25rem;
	--header--height: 100vh;
	--header--width--sp: 6.5rem;
}
html,body{
	font-family: "Kiwi Maru", serif;
	font-weight: 400;
	font-style: normal;
	overflow-x: hidden;
	background-color: #fcfcfc;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input, textarea{
	font-family: "Kiwi Maru", serif;
}
section{ position: relative; overflow: hidden; }
.inner{	padding: 0 2vw; }


.bg-green{ background-color: var(--color--bggreen); }
.bg-orange{ background-color: var(--color--bgorange); }
.bg-pink{ background-color: var(--color--bgpink); }
.bg-blue{ background-color: var(--color--bgblue); }





/* header -----------------------------------------------------------------------------------------------------------------------------------------------------------*/



header{

	position: fixed;

	width: var(--header--width);

	background-color: var(--color--white);

	height: var(--header--height);

}

header .header-inner{

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	min-height: calc(var(--header--height) - 5rem);

	margin: 0 0 2.5rem 0;

}

header .logo{ text-align: center; }
header .logo img{ max-width: 100%; width: 100%; }


header .header-menu .menu{ margin-top: 0rem; }
header .header-menu .menu ul{ margin: 0 1rem; }
header .header-menu .menu ul li:first-child{ border-top: var(--color--green) 1px dashed; }
header .header-menu .menu ul li{ border-bottom: var(--color--green) 1px dashed; }
header .header-menu .menu ul li a{ padding: 1.5rem .8rem; color: var(--color--green); display: flex; justify-content: space-between; align-items: center; }
header .header-menu .menu ul li.active a,
header .header-menu .menu ul li a:hover{ background-color: var(--color--green); color: var(--color--white); }


header .sns{ margin-top: 3rem; }
header .sns ol{ display: flex; justify-content: center; }
header .sns ol li:not(:last-child){ margin-right: .5rem; }
header .sns ol li a{ display: flex; width: 5rem; height: 5rem; align-items: center; justify-content: center; }
header .sns ol li a i{ font-size: 3.4rem; transition: .5s; }
header .sns ol li a:hover i{ color: var(--color--orange); }


header.g .header-menu .menu ul li:first-child{ border-top: var(--color--green) 1px dashed; }
header.g .header-menu .menu ul li{ border-bottom: var(--color--green) 1px dashed; }
header.g .header-menu .menu ul li a{ color: var(--color--green); }
header.g .header-menu .menu ul li.active a,
header.g .header-menu .menu ul li a:hover{ background-color: var(--color--green); color: var(--color--white); }

header.b .header-menu .menu ul li:first-child{ border-top: var(--color--blue) 1px dashed; }
header.b .header-menu .menu ul li{ border-bottom: var(--color--blue) 1px dashed; }
header.b .header-menu .menu ul li a{ color: var(--color--blue); }
header.b .header-menu .menu ul li.active a,
header.b .header-menu .menu ul li a:hover{ background-color: var(--color--blue); color: var(--color--white); }
header.b .sns ol li a:hover i{ color: var(--color--blue); }

header.p .header-menu .menu ul li:first-child{ border-top: var(--color--pink) 1px dashed; }
header.p .header-menu .menu ul li{ border-bottom: var(--color--pink) 1px dashed; }
header.p .header-menu .menu ul li a{ color: var(--color--pink); }
header.p .header-menu .menu ul li.active a,
header.p .header-menu .menu ul li a:hover{ background-color: var(--color--pink); color: var(--color--white); }
header.p .sns ol li a:hover i{ color: var(--color--pink); }


.wrapper{
	padding-left: var(--header--width);
	width: calc(100%);
	min-height: var(--header--height);
}





footer{
	background-color: var(--color--footer);
	padding: 10rem 0 2rem;
	margin-top: -7rem;
}



footer .inner{  text-align: center; }

footer .logo{ font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; }



footer .copyright{

	text-align: right;

	margin-top: 3rem;

}



footer .copyright small{ font-size: 1.0rem; font-weight: 700; }



.section-spacer{ margin-top: 7rem; }





.midashi{ font-size: 4rem; text-align: center; margin-bottom: 4rem; line-height: 1.2; }







.anchor{ position: absolute; padding-top: 2rem; margin-top: -2rem; }







section.message .inner{ max-width: 68rem; margin: 0 auto; }

section.message .catch{ text-align: center; margin-bottom: 3.5rem; font-size: 3rem; }





section.main .cover{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
}

section.main .cover h1 *{

	font-size: 5rem;

	color: var(--color--white);

	letter-spacing: .5rem;

	text-shadow: var(--color--black) 1px 0 10px;

}



section.main{

	width: 100%;

	max-height: 350rem;

	z-index: 0;

}

section.main img{

	max-width: 100%;

	width: 100%;

	height: 100%;

	object-fit: cover;

}





.contact-box{

	margin: 7rem 3rem 0;

}





.contact-inbox{ background-color: var(--color--green);

	padding: 3rem 5rem;

	display: flex;

	justify-content: space-between;

	border-radius: .8rem;

}

.contact-inbox *{ color: var(--color--white); }



.contact-inbox .contact-inbox-l{ width: calc(100% - 32rem - 10vw); }

.contact-inbox .contact-inbox-l .title{ font-size: 2.4rem; margin-bottom: 1.5rem; }



.contact-inbox .contact-inbox-r{ width: 32rem; }

.contact-inbox .contact-inbox-r dl dt{ text-align: center; }

.contact-inbox .contact-inbox-r dl dd a{ display: block; font-size: 3.4rem; font-weight: 700; text-align: center; }

.contact-inbox .contact-inbox-r dl span{ display: block; font-size: 1.4rem; text-align: center; }

.contact-inbox .contact-inbox-r .button{ margin-top: 1.5rem; }

.contact-inbox .contact-inbox-r .button a{ display: flex; width: 100%; height: 6rem; align-items: center; justify-content: center; background-color: var(--color--pink); border-radius: 5rem; }

.contact-inbox .contact-inbox-r .button a:hover{ background-color: var(--color--darkpink); }

.contact-inbox .contact-inbox-r .button a i{ padding-right: 1rem; }











.company-information{ margin-top: 3rem; }

.company-information dl{ width: 100%; display: flex; border-top: #ccc 1px solid; padding: 1.2rem 0; position: relative; background-color: var(--color--white); }

.company-information dl:last-child{ border-bottom: #ccc 1px solid; }

.company-information dl dt{ width: 15rem; text-align: center; }

.company-information dl dd{ width: calc(100% - 15rem); }

.company-information dl dd span{ display: block; font-size: 1.4rem; }









section.news .news-list .buttons{ margin-top: 3rem; }

section.news .news-list .buttons a{ border-bottom: none !important; text-align: center; }

section.news .news-list .buttons a i{ padding-left: 1rem; }



section.news .news-list .buttons a span{ padding-bottom: .5rem; border-bottom: transparent; transition: .5s; }

section.news .news-list .buttons a:hover span{ border-bottom: var(--color--black) 1px solid; }



.profile-wrapperbox{

	display: flex;

	justify-content: space-between;

}











.face-box{

	border: var(--color-lightgray) 1px solid;

	border-radius: .8rem;

	width: 30rem;

	padding: 3rem;

}

.face-box .face{

	max-width: 20rem;

	min-height: 20rem;

	width: 100%;

	background-color: var(--color--white);

		display: block;

		margin: 0 auto;

		border-radius: 50rem;

		border: #ccc 1px solid;

		overflow: hidden;

}

.face-box .face img{ max-width: 100%; transform: scale(1.2, 1.2); }



.face-box *{ color: var(--color-white); }



.face-box .name{ text-align: center; margin-top: 1rem; font-size: 3rem; position: relative; }

.face-box .name span{ display: block; line-height: 1; }

.face-box .name::after{ content: "―"; }



.face-box .position{ font-size: 1.2rem; text-align: center; }



.face-box .sns{ display: flex; justify-content: center; margin-top: 1.5rem; }

.face-box .sns li:not(:last-child){ margin-right: 2rem; }

.face-box .sns li i{ font-size: 3rem; }





.profile-box{ width: calc(100% - 35rem); margin-left: 5rem; }

.profile-box h3{ font-size: 3rem; margin-bottom: 2rem; }









.archive,
.single,
.page-template{
	background-image: linear-gradient(0deg, transparent 15px, var(--color--nearwhite) 16px), linear-gradient(90deg,  transparent 15px, var(--color--nearwhite) 16px);
	background-size: 16px 16px;
}











.page-title{ height: 10rem; display: flex; align-items: center; justify-content: center; }

.page-title .title{ display: flex; align-items: center; justify-content: center; overflow: hidden; height: 3rem; width: 100%; }

.page-title .title span{ font-size: 3rem; line-height: 1; }









.news-article-listbox,

.news-article,

.contact .inner{ margin: 0 3rem; }





.news-article-wrapper,

.news-article .article,

.contact-informbox{ margin-top: 5rem; background-color: var(--color--white); padding: 5rem 5rem; border: var(--color--nearwhite) 1px solid; border-radius: 1rem; }







.news-article .article .title{ font-size: 3rem; }

.news-article .article .date{ text-align: right; }



.news-article .article article{ margin-top: 2.5rem; padding-top: 2.5rem; border-top: var(--color--nearwhite) 1px solid; }



.news-article .article article img{ max-width: 100%; height: auto; }









.news-article-list{ display: flex; justify-content: flex-start; flex-wrap: wrap; }

.news-article-list a{ width: calc(50% - 6rem); padding: 2rem 3rem; }

.news-article-list a:nth-child(odd){ border-right: var(--color--lightgray) 1px solid; width: calc(50% - 6rem - .1rem); }



.news-article-list a dl{ display: flex; justify-content: space-between; }

.news-article-list a dl dt{ width: 10rem; height: 10rem; border-radius: 15rem; overflow: hidden; }

.news-article-list a dl dt img{ width: 100%; height: 100%; object-fit: cover; transition: .5s; }

.news-article-list a dl dd{ width: calc(100% - 13rem); }

.news-article-list a dl dd span{ display: block; }



.news-article-list a:hover dl img{ transform: scale(1.1, 1.1); }



.news-article-wrapper .pager{ margin-top: 5rem; }

.news-article-wrapper .wp-pagenavi{ display: flex; justify-content: center; }

.news-article-wrapper .wp-pagenavi *{ width: 3.5rem; height: 4rem; display: flex; justify-content: center; align-items: center; line-height: 1; border-radius: 5rem; }







.news-article .button-articles{  margin-top: 2.5rem; border-top: var(--color--nearwhite) 1px solid; border-bottom: var(--color--nearwhite) 1px solid; }

.news-article .button-articles ul{ display: flex; }

.news-article .button-articles ul li{ width: 33.3%; }

.news-article .button-articles ul li:not(:last-child){ border-right: var(--color--nearwhite) 1px solid; }

.news-article .button-articles ul li a{ display: block; text-align: center; padding: 1.5rem 0; }

#ContactBoxFormPrivacy{

	width:100%;

	background: var(--color-white);

	overflow: auto;

	height: 300px;

	border: #aaaaaa 1px solid;

	margin: 55px 0 10px 0;

}





#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner{

	display: table;

	width:100%;

	height: 100%;

	padding: 2%;

	background-color: #fafafa;

}



#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner .tit{

	text-align: center;

	font-size: 1.8rem;

	margin-bottom: 2rem;

}

#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner .msg{

	margin-bottom: 10px;

	font-size: 1.4rem;

	line-height: 2;

	text-align: left;

}

#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner dl{

	margin-bottom: 12px;

}



#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner dl *{

	font-size: 14px;

	line-height: 2.4;



}



#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner dl dt{

	font-weight: bold;

	margin-bottom: 5px;

}







#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner a.btnClose{

	display: block;

	width: 120px;

	padding: 7px 10px;

	margin: 30px auto 0 auto;

	border: #999999 2px solid;

  border-radius: 25px;

	text-align: center;

	font-size: 14px;

}

#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner a.btnClose span{

	background: url(../images/icon/ico_form_close.svg) no-repeat 0 50%;

	background-size: 12px auto;

	display: block;

}





#ContactBoxFormPrivacyTxts{

	width: 100%;

margin:0 auto;

padding:0;

}









.privacy-check{text-align: center; margin-top: 2rem; display: block; }









.page-contact .inner{ padding-top: 10rem; padding-bottom: 10rem; }





input[type="checkbox"] {

	position: relative;

	width: 16px;

	height: 16px;

	border: 1px solid #000;

	vertical-align: -5px;

	-webkit-appearance: none;

	   -moz-appearance: none;

			appearance: none;

  }

  

  input[type="checkbox"]:checked:before {

	position: absolute;

	top: 1px;

	left: 4px;

	transform: rotate(50deg);

	width: 4px;

	height: 8px;

	border-right: 2px solid #000;

	border-bottom: 2px solid #000;

	content: '';

  }























.contact-form .msg{ text-align: center; line-height: 2.6; font-size: 1.8rem; }



.contact-form dl:first-of-type{ margin-top: 5rem !important; }

.contact-form dl{ margin-top: 3rem; }

.contact-form dl dt{ margin-bottom: .7rem; font-size: 2rem; display: flex; align-items: center; justify-content: space-between; }

.contact-form dl dt span{ font-size: 1.4rem; background-color: #c00; color: var(--color--white); line-height: 1; padding: .7rem 2rem; border-radius: 5rem; }

.contact-form dl dd input,

.contact-form dl dd textarea{ width: 100%; padding: 2.5rem 2rem; border-radius: .5rem; letter-spacing: .2rem; }

.contact-form dl dd textarea{ line-height: 2; }

.contact-form .button .b{ display: none; }







#ContactBoxFormPrivacy::-webkit-scrollbar { width: .8rem; background-color: var(--color--lightgray); }

#ContactBoxFormPrivacy::-webkit-scrollbar-thumb { background: var(--color-black); width: .6rem; }







.button{ margin-top: 5rem; overflow: hidden; height: 8rem; }

.button ul{ display: flex; justify-content: center; }

.button ul li{ position: relative; }

.button input,

.button a{

	display: flex;

	justify-content: center;

	align-items: center;

	width: 35rem;

	height: 8rem;

	border: none;

	border-radius: 5rem;

	position: relative;

	background-color: var(--color--orange);

	color: var(--color--white);

	font-size: 1.8rem;

	cursor: pointer;

	transition: .5s all;

}

.button input:hover,

.button a:hover{

	background-color: var(--color--darkorange);

}

.button li.s::after{

	position: absolute;

	content:"\f054";

	font-family: "Font Awesome 6 Free";

	font-weight: 900;

	top:calc(50% - 12.5px);

	right:3rem;

	color: var(--color--white);

	font-size: 1.4rem;

	transition: .5s all;

}

.button li.s:hover::after{ right:2rem; }



.button li.b input{ background-color: var(--color--black); }

.button li.b::after{

	position: absolute;

	content:"\f053";

	font-family: "Font Awesome 6 Free";

	font-weight: 900;

	top:calc(50% - 12.5px);

	left:3rem;

	color: var(--color--white);

	font-size: 1.4rem;

	transition: .5s all;

}

.button li.b:hover input{ background-color: var(--color--semiblack); }

.button li.b:hover::after{ left:2rem; }









/* 共通画面 */

.contact-message{ margin-top: 4.5rem; }

.contact-message .tit{ text-align: center; font-size: 2rem; margin-bottom: 3rem; }

.contact-message p{ text-align: center; line-height: 2; }







/* 確認画面 */

.contact-confirm dl dt span,

.contact-confirm #ContactBoxFormPrivacy,

.contact-confirm .privacy-check{ display: none; }



.contact-confirm dl:first-of-type{ margin-top: 5rem !important; }

.contact-confirm dl{ display: flex; align-items: center; padding: 2.5rem 0; border-top: var(--color--lightgray) 1px solid; margin-top: 0; position: relative; }

.contact-confirm dl::before{ content: ""; position: absolute; width: 18rem; height: .1rem; background-color: var(--color--black); top: -.1rem; }



.contact-confirm dl dt{ width: 22rem; font-size: 1.6rem; margin-bottom: 0; }

.contact-confirm dl dd{ width: calc(100% - 22rem); }

.contact-confirm dl:last-of-type{ border-bottom: var(--color--lightgray) 1px solid; }

.contact-confirm dl:last-of-type::after{ content: ""; position: absolute; width: 18rem; height: .1rem; background-color: var(--color--black); bottom: 0; }



.contact-confirm .button .b{ margin-right: 1.5rem; display: inherit; }















section.news .news-list{ display: flex; justify-content: space-between; background-color: var(--color--white); padding: 3rem; border-radius: 1rem; border: var(--color--lightgray) 1px solid; }





section.news .news-list .news-list-news,

section.news .news-list .news-list-blog{ width: 49.5%; }







section.news .news-list.news-list-all .news-list-news{ width: 100%;  }



section.news .news-list.news-list-all .news-list-news .news-list-news-inbox{ display: flex; width: 100%; }



section.news .news-list.news-list-all .news-list-news .news-list-news-inbox a{ width: 49%; }



section.news .news-list.news-list-all .news-list-news .news-list-news-inbox a:nth-child(odd){ margin-right: 2%; }





section.news .news-list a{

	display: block;

	margin-bottom: 1rem;

	padding-bottom: 1rem;

	border-bottom: var(--color--lightgray) 1px solid;



}



section.news .news-list a dl{ display: flex; justify-content: space-between; }

section.news .news-list a dl dt{ width: 10rem; height: 10rem; border-radius: 15rem; overflow: hidden; }

section.news .news-list a dl dt img{ width: 100%; height: 100%; object-fit: cover; transition: .5s; }

section.news .news-list a dl dd span{ display: block; }

section.news .news-list a dl dd{ width: calc(100% - 13rem); }















.progressbar {

    position : relative;

	z-index  : 0;

    margin   : 3rem auto 0;

    padding  : 0;

    display  : flex;

    flex-wrap: wrap;

	max-width: 40rem;

    justify-content: space-between;

}

.progressbar li {

    position: relative;

    list-style-type: none;

    text-align: center;

    text-transform: uppercase;

    width: 33.333%;

    color: var(--color--semiorange);

    font-weight: bold;

}

.progressbar li:before {

    display: block;

    width: 18px;

    height: 18px;

    margin: 7px auto 20px auto;

    content: '';

    text-align: center;

    border-radius: 50%;

    background-color: var(--color--semiorange);

}

.progressbar li:after {

    position: absolute;

    z-index: -1;

    top: 15px;

    left: -50%;

    width: 100%;

    height: 2px;

    content: '';

    background-color: var(--color--semiorange);

}

.progressbar li:first-child:after {

    content: none;

}

.progressbar li.active,

.progressbar li.complete{

    color: var(--color--orange);

}

.progressbar li.active:before,

.progressbar li.complete:before {

    background-color: var(--color--orange);

}

.progressbar li.active:after,

.progressbar li.complete:after {

    background-color: var(--color--orange);

}













section.service .service-list dl dt{ text-align: center; margin-bottom: 2rem; }

section.service .service-list dl dt span{ display: flex; width: 20rem; height: 20rem; background-color: var(--color--bgorange); overflow: hidden; border-radius: 10rem; margin: 0 auto; }

section.service .service-list dl dt span img{ width: 100%; height: 100%; object-fit: cover; }



section.service .service-list{ display: flex; justify-content: space-between; }

section.service .service-list a{ display: flex; width: 32%; border-radius: 1rem; border:var(--color--lightgray) 1px solid; flex-direction: column; justify-content: space-between; }

section.service .service-list a dl{ padding: 2rem; }



section.service .service-list a dl dd{ text-align: center; font-weight: 700; font-size: 1.8rem; }



section.service .service-list a .link{ text-align: center; padding: 1rem 0; text-align: center; border-radius: 0 0 .8rem .8rem; color: var(--color--white); }

section.service .service-list a.bg-green .link{ background-color: var(--color--green); }

section.service .service-list a.bg-orange .link{ background-color: var(--color--orange); }

section.service .service-list a.bg-pink .link{ background-color: var(--color--pink); }

section.service .service-list a.bg-blue .link{ background-color: var(--color--blue); }













.service-box{ padding: 5rem 0; }

.service-box .title{ text-align: center; font-size: 2.4rem; }

.service-box .inner{ margin: 0 3rem; }









.service-inbox{ display: flex; justify-content: space-between; margin-top: 5rem; }





.service-inbox .img{ width: 36rem; }

.service-inbox .img img{ width: 100%; }





.service-inbox .contents{ width: calc(100% - 40rem); }











.service-inbox .buttonPdf,

.service-inbox .youtube{ margin-top: 3.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.service-inbox .youtube span{ margin-bottom: 1.5rem; }


.service-inbox .buttonPdf{ max-width: 40rem; margin-left: auto; }

.service-inbox .buttonPdf a{ display: flex; width: 100%; height: 6rem; align-items: center; justify-content: center; background-color: var(--color--orange); border-radius: 5rem; color: var(--color--white); }

.service-inbox .buttonPdf a i{ padding-left: 1rem; }

.service-inbox .buttonPdf a:hover{ background-color: var(--color--darkorange); }









/* --------------------------------------------------------------------------------------------------------------
	partnership
-------------------------------------------------------------------------------------------------------------- */

.partnership-message{ margin-bottom: 7rem; }
.partnership-message .inner{ max-width: 90rem; margin: 0 auto; }
.partnership-message dl{ display: flex; align-items: center; }
.partnership-message dl dt{ max-width: 30rem; margin-left: 7.5rem; }
.partnership-message dl dt img{ width: 100%; }


.partnership-box{ margin: 0 3rem; }
.partnership-box .inner{ display: flex; flex-wrap: wrap; }
.partnership-box .partnership-inbox{ width: 50%; padding: 1.5rem 1.5rem 4rem; }
.partnership-box .partnership-inbox:nth-child(odd){ border-right: #999999 .1rem solid; }
.partnership-box .partnership-inbox.partnership-bottom{ border-bottom: #999999 .1rem solid; }

.partnership-box .partnership-inbox h3{ text-align: center; font-size: 2rem; margin-bottom: 2.5rem; }
.partnership-box .partnership-inbox dl dt img{ max-width: 100%; width: 100%; }
.partnership-box .partnership-inbox dl dd{ margin-top: 2rem; }
.partnership-box .partnership-inbox dl dt iframe{ aspect-ratio: 16 / 9.6; width: 100%; }



.instagram-group{
	display: flex;
	justify-content: space-between;
}

.instagram-boxes{
	width: 49.5%;
}
.instagram-group .tit{
	text-align: center;
}

.instagram-group .buttons{
	margin-top:1.5rem;
}
.instagram-group .buttons a{
    display: flex;
    width: 100%;
    height: 6rem;
    align-items: center;
    justify-content: center;
    background-color: var(--color--blue);
    border-radius: 5rem;
	color: var(--color--white);
}
.instagram-group .buttons-2 a{
    background-color: var(--color--green);
	
}



.btnPdf{
	display: inline-flex;
	background-color: #c00;
	color: #ffffff !important;
	padding: 1rem 2rem;
	border-radius: 2rem;
	margin-top: 1rem;
}




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


	header .logo img{ max-width: 19.5rem; }


	.section-spacer{ margin-top: 5rem; }



	header{ position: fixed; width: 100%; height: var(--header--width--sp); z-index: 1; background-color: var(--color--white); }

	header .header-inner{ min-height: auto; height: var(--header--width--sp); margin: 0; align-items: center; flex-direction: inherit; padding: 0 0 0 2rem; }



	header .logo{ color: var(--color--white); height: var(--header--width--sp); display: flex; align-items: center; }
	header .logo img{ height: calc(var(--header--width--sp) - 1.5rem); }

	header .menu{ display: none; }





	main{ padding-top: var(--header--width--sp); }



	.wrapper{ padding-left: 0; }



	.midashi{ font-size: 3rem; margin-bottom: 2rem; }



	.profile-box{ width: 100%; margin-left: 0; }



	.face-box{ width: 100%; }

	.profile-wrapperbox{ display: block; }



	section.service .service-list{ display: block; }





	.news-article-list{ display: block; }

	

	.news-article-list a{ border-bottom: var(--color--lightgray) 1px solid; display: block; }

	.news-article-list a:nth-child(odd){ border-right: none; }



	.news-article-list a:nth-child(odd),

	.news-article-list a{ width: 100%; padding: 2rem 0; }





	.news-article-list,

	.contact-informbox{ padding: 3rem 2rem; }



	.contact-form dl dd input, .contact-form dl dd textarea{ padding: 1.5rem 2rem; }





	.news-article-listbox, .news-article, .contact .inner{ margin: 1rem; }





	.contact-form dl{ margin-top: 2rem; }

	.contact-form dl dt{ font-size: 1.6rem; }



	.button ul{ flex-direction: column; }



	.button input, .button a{  width: 100%; }





	.contact-form dl:first-of-type{ margin-top: 1rem !important; }



	.contact-inbox{ display: block; padding: 2rem 2.5rem; }

	.contact-inbox .contact-inbox-l,

	.contact-inbox .contact-inbox-r{ width: 100%; }



	.contact-inbox .contact-inbox-l p{ font-size: 1.4rem; }





	.contact-confirm .button .b{ margin-right: 0; }



	.button{ height: auto; }

	.button ul{ flex-direction: column-reverse; }

	.button ul li.b{ margin-top: 1rem; }





	.contact-confirm dl{ display: block; padding: 1rem 0; }

	.contact-confirm dl:last-of-type::after,

	.contact-confirm dl::before{ width: 15rem; }



	.contact-confirm dl dt,

	.contact-confirm dl dd{ width: 100%; }






	.contact-informbox{ padding: 4rem 2rem !important; }


	.contact-form .msg{ margin-bottom: 3rem; text-align: left; font-size: 1.4rem; line-height: 1.6; }





	.contact-box{ margin: 5rem 0; }

	.contact-box .inner{ margin: 0 1.5rem; }





	.contact-inbox .contact-inbox-r{ margin-top: 3rem; }

	.contact-inbox .contact-inbox-r dl dd a{ font-size: 2.4rem; }

	.contact-inbox .contact-inbox-r dl span{ font-size: 1.2rem; }



	footer .copyright{ text-align: center; }





	.hamburger {
		display : block;
		position: fixed;
		z-index : 3;
		right : 0;
		top   : 0;
		width : var(--header--width--sp);
		height: var(--header--width--sp);
		cursor: pointer;
		text-align: center;
	}

	.hamburger span {
		display : block;
		position: absolute;
		width   : calc(var(--header--width--sp) / 2);
		height  : 2px ;
		left    : calc(50% - calc(var(--header--width--sp) / 4));
		background : var(--color--orange);
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition   : 0.3s ease-in-out;
		transition        : 0.3s ease-in-out;
	}
	.hamburger span:nth-child(1) { top: calc(50% - 1.2rem); }
	.hamburger span:nth-child(2) { top: calc(50% - .1rem); }
	.hamburger span:nth-child(3) { top: calc(50% + 1rem); }


	header.g .hamburger span{ background : var(--color--green); }
	header.b .hamburger span{ background : var(--color--blue); }
	header.p .hamburger span{ background : var(--color--pink); }


	/* スマホメニューを開いてる時のボタン */
	.hamburger.active span:nth-child(1) {
		top: calc(50% - .2rem);
		-webkit-transform: rotate(-45deg);
		-moz-transform   : rotate(-45deg);
		transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2){
		opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
		top: calc(50% - .2rem);
		-webkit-transform: rotate(45deg);
		-moz-transform   : rotate(45deg);
		transform        : rotate(45deg);
	}

	/* メニュー背景　*/
	.globalMenuSp {
		position: fixed;
		z-index : 2;
		top  : 0;
		left : 0;
		background: var(--color--white);
		text-align: center;
		width: 100%;
		margin-top: var(--header--width--sp);
		transform: scale(0,0);
		transition: all 0.6s;
		visibility: hidden;
		height: calc(100vh - var(--header--width--sp));
		opacity: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: auto;
		padding-top: 2rem;
	}
	.globalMenuSp ul {
		margin: 0 auto;
		padding: 0;
		width: calc(100% - 4rem);
		margin: 0 2rem;
	}

	

	.globalMenuSp ul li {
		list-style-type: none;
		padding: 0;
		width: 100%;
		transition: .4s all;
		border-top: var(--color--semiorange) 1px dashed;
	}

	.globalMenuSp ul li:last-child {
		padding-bottom: 0;
		border-bottom: var(--color--semiorange) 1px dashed;
	}

	

	.globalMenuSp ul li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--color--orange);
		padding: 2rem 1rem 2rem 2rem;
		text-decoration :none;
	}

	.globalMenuSp ul li:hover a,
	.globalMenuSp ul li.active a{
		color: var(--color--white) !important;
	}

	header.g .hamburger span{ background : var(--color--green); }
	header.b .hamburger span{ background : var(--color--blue); }
	header.p .hamburger span{ background : var(--color--pink); }

	header.g .globalMenuSp ul li.active a{ background-color: var(--color--green); }
	header.b .globalMenuSp ul li.active a{ background-color: var(--color--blue); }
	header.p .globalMenuSp ul li.active a{ background-color: var(--color--pink); }

	header.g .globalMenuSp ul li{ border-top: var(--color--green) 1px dashed; }
	header.b .globalMenuSp ul li{ border-top: var(--color--blue) 1px dashed; }
	header.p .globalMenuSp ul li{ border-top: var(--color--pink) 1px dashed; }

	header.g .globalMenuSp ul li:last-child { border-bottom: var(--color--green) 1px dashed; }
	header.b .globalMenuSp ul li:last-child { border-bottom: var(--color--blue) 1px dashed; }
	header.p .globalMenuSp ul li:last-child { border-bottom: var(--color--pink) 1px dashed; }

	header.g .globalMenuSp ul li a { color: var(--color--green); }
	header.b .globalMenuSp ul li a { color: var(--color--blue); }
	header.p .globalMenuSp ul li a { color: var(--color--pink); }
	
	header.g .globalMenuSp ul li:hover a,
	header.g .globalMenuSp ul li.active a{ background-color: var(--color--green); }
	header.b .globalMenuSp ul li:hover a,
	header.b .globalMenuSp ul li.active a{ background-color: var(--color--blue); }
	header.p .globalMenuSp ul li:hover a,
	header.p .globalMenuSp ul li.active a{ background-color: var(--color--pink); }

	

	/* クリックでjQueryで追加・削除 */
	.globalMenuSp.active {
		opacity: 1;
		visibility: visible;
		transform: scale(1,1);
	}

	/* sns */
	header .globalMenuSp .sns{ margin-bottom: 1.5rem; }
	header .globalMenuSp .sns ol{ justify-content: space-between; }
	header .globalMenuSp .sns ol li{ width: 33.3%; margin-right: 0 !important; }
	header .globalMenuSp .sns ol li a{ width: 100%; }
	header .globalMenuSp .sns ol li a:hover i,
	header .globalMenuSp .sns ol li a i{ color: var(--color--orange); }

	header.g .globalMenuSp .sns ol li a i{ color: var(--color--green); }
	header.b .globalMenuSp .sns ol li a i{ color: var(--color--blue); }
	header.p .globalMenuSp .sns ol li a i{ color: var(--color--pink); }




	/* :::::

	news

	::::: */

	.news-article-wrapper, .news-article .article, .contact-informbox{

		margin-top: 0;

		padding: 2rem;

	}

	.news-article-list, .contact-informbox{ padding: 0; }





	section.service .service-list a{ width: 100%; }

	section.service .service-list a:not(:last-child){ margin-bottom: 2rem; }









	.news-article-list a dl dd span{ font-size: 1.2rem; }









	section.news .news-list{ display: block; }



	section.news .news-list .news-list-news,

	section.news .news-list .news-list-blog{ width: 100%; background-color: var(--color--white); border: var(--color--lightgray) 1px solid; padding: 0 2rem; }



	.news-list-blog{ margin-top: 4rem; }



	section.news .news-list{ padding: 0; border: none; background-color: transparent; }

	section.news .news-list a{ margin-bottom: 0; padding: 2rem 0; }

	section.news .news-list a dl dt{ margin: 0 auto 3rem; width: 14rem; }

	section.news .news-list a dl dd{ width: calc(100% - 3rem); padding: 0 1.5rem; }



	.service-box .inner{ margin: 0 1rem; }

	.service-inbox{ flex-direction: column; }



	.service-inbox .img{ width: 100%; }

	.service-inbox .contents{ width: 100%; margin-top: 2.5rem; }



	.service-02 .service-inbox{ flex-direction: column-reverse; }



	footer{ padding-top: 5rem; }





	section.news .news-list.news-list-all .news-list-news .news-list-news-inbox{ display: block; }

	section.news .news-list.news-list-all .news-list-news .news-list-news-inbox a{ width: 100%; }

	section.news .news-list.news-list-all .news-list-news .news-list-news-inbox a:nth-child(odd){ margin-right: 0; }







	.company-information dl{ display: block; padding: 1.2rem; width: calc(100% - 2.4rem); }

	.company-information dl dt{ width: 100%; text-align: left; }

	.company-information dl dd{ width: calc(100% - 1rem); padding-left: 1rem; }



	section.message .catch{ font-size: 2rem; margin-bottom: 1.5rem; }

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



	section.main .cover h1 *{ font-size: 2.4rem; }


	
	/* partnership
	-------------------------------------------------------------------------------------------------------------- */

	.partnership-message{ margin-bottom: 4rem; }
	.partnership-message dl{ flex-direction: column-reverse; }
	.partnership-message dl dt{ margin-left: 0; margin: 0 3rem 3rem; }
	.partnership-message dl dt img{ max-width: 25rem; }

	.partnership-box{ margin: 0; }
	.partnership-box .inner{ display: block; }
	.partnership-box .partnership-inbox{ width: 100%; }
	.partnership-box .partnership-inbox{ border-right: none !important; }
	.partnership-box .partnership-inbox:first-child{ border-top: #999999 .1rem solid; }
	
	
	.instagram-group .buttons a{
		font-size:1.2rem;
	}

}




.insta_button{
	display: block;
	margin-top: 1.5rem;
}


.insta_button a{/*ボタンの下地*/
	color: #FFF;/*文字・アイコン色*/
	border-radius: 7px;/*角丸に*/
	position: relative;
	height: 4rem;/*高さ*/
	text-align: center;/*中身を中央寄せ*/
	font-size: 25px;/*文字のサイズ*/
	line-height: 50px;/*高さと合わせる*/
	background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
	overflow: hidden;/*はみ出た部分を隠す*/
	text-decoration:none;/*下線は消す*/
    display: flex
;
    justify-content: center;
    align-items: center;
  }
  
  .insta_button a:before{/*グラデーション②*/
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;/*全体を覆う*/
	height: 100%;/*全体を覆う*/
	background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
	background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  }
  .insta_button a i{ z-index: 2; margin-right: .5rem; font-size: 1.8rem; }
  .insta_button span { position: relative; font-size: 1.4rem; }