@charset "UTF-8";


@media (max-width:599px){
	:root{
		font-size: 16px;
	}
}
@media (min-width:600px)and(max-width:949px){
	:root{
		font-size: 20px;
	}
}
@media (min-width:950px)and(max-width:1279px){
	:root{
		font-size: 20px;
	}
}
@media (min-width:1280px) {
	:root {
		font-size: 20px;
	}
}


@media (min-width:640px){/*スマホ以上*/
div.main-container{
	display: flex;
	flex-flow: column;
	justify-content: center;/*両端揃えで表示*/
	padding: 0 5%;
}
.br{
	display: none;
}
.small-con .fadeDownTrigger{
	display: flex;
	align-items: center;
  justify-content: center;
	font-weight: bold;
	text-align: center;
}
.mainimages .wrapper {
	margin: 0;
}
#section_topics .main-container.flex{
	flex-direction: row;
}
.title .text {
	display: block;
	text-align: center;
}
.con1 .box {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

footer .main-container{
	display: block!important;
}
.footA{
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	flex-wrap: nowrap;
	justify-content: center;
}
nav.footB{
	width: 100%;
}
footer .sub-container{
	display: flex;
	justify-content: space-evenly;
}
.footB div{
	flex: 1;/*1:1の比率で等分割*/
}
.footB a,.footB p{
	font-size: 16px;
}
.footB{
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}
.footB ul {
  padding-top: 10px;
  display: flex;
  gap: 20px 40px;
	justify-content: center;
}
.footB ul li a,.footB ul li p {
	display: block;
	/*text-align: left;*/
	text-align: center;
	/*width: 200px;*/
	width: 180px;
	height: 30px;
	font-size: 16px;
	line-height: 1.5;
}
.footB ul li ul li a {/*layer-2▷*/
	border-bottom: none;
}
.copywright{
	font-size: 12px;
	text-align: center;
	font-family: 'Courier New', Courier, monospace;
}

}

@media (min-width:1600px)/*(大画面)*/{
.headB nav ul li a {
	/* padding: 10px 25px; */
	font-size: 1.2rem;
}

.headB .sub-menu {
	background: var(--base-color);
}


.block.sec1 {
	padding-bottom: 100px;
}
}
@media (min-width:1200px) and (max-width:1599px)/*(小PC)*/{
.headA h2 {
	font-size: 1rem;
}

.headD .text p {
	text-align: right;
}
.pagetop {
	width: 120px;
	height: 120px;
	font-size: 1.8rem;
}
/*========= mainimages ===============*/
.images2 img {
	width: 95%;
}


.mainimages .textbox h3 {
	font-size: 2rem;
}
/*======== section1 ネットワーク紹介==========*/
.CardTitle {
	text-align: center;
}



.footA img {
	width: 10em;
	margin-top: 10px;
	margin-bottom: 10px;
}
/*========= section2 con1 introduction 取り組み紹介 ===============*/
.containerbox {
	gap: 50px;
}
.containerbox .box {
	width: calc(50% - 50px);
}
.containerbox .box .news-content {
  padding: 3px;
  line-height: 1.3;
  font-size: .95rem;
}
.containerbox .box::before {
	font-size: 2.5rem;
}
.containerbox .box .news-title {
	font-size: 1.25rem;
	padding: 15px 5px;
}

.containerbox .box.comingsoon .news-not {
	font-size: 2.5rem;
}



/*========= section6 con4 Recreation===============*/

.heading-1 {
	height: fit-content;
}
}
@media (min-width:640px) and (max-width:1199px) and (orientation: landscape)/*デバイスが横長の状態の場合(小PC)*/{
html {
	scroll-padding-top: 120px;
}
#logo-img {
	width: 80px;
	height: 80px;
}
.headB ul {
	gap: 20px;
}
.headB ul li a {
	min-width: auto;
	width: fit-content;
	background-size: 0% 20%;
	padding: 10px 0;
	padding-bottom: 10px;
	font-size: .9rem;
}

.headD .text p {
	margin: 5px;
	font-size: .9rem;
	text-align: right;
}
/*========= mainimages ===============*/
.mainimages .wrapper {
  height: calc(85dvh - 120px);
	margin-top: 120px;
	overflow: hidden;
}
.mainimages .text {
	grid-row: 2;
}
.mainimages .anim_img {
	right: 10%;
	width: calc(100vw / 8);
}
.anim_img2 {
	left: 10%;
	top: calc(120px + 10px);
	width: calc(100vw / 8);
}

/* ---top btn pagetop--- */
.pagetop {
	width: 100px;
	height: 100px;
	font-size: 1.52rem;
}
/*========= section1 top-banner catchcopy What kind of place?===============*/
#section1 h2 {
	-webkit-text-fill-color: var(--accent-color);
	-webkit-text-stroke: 8px white;
	paint-order: stroke;
}
#section1 h3 {
	margin-top: 150px;
	font-size: 1.2rem;
}
.top-banner {
	height: 15vh;
}
.top-banner img {
	width: 40vw;
	height: auto;
	padding: 15px 60px;
}
.top-banner img:first-child {
	padding-right: 0;
}
.top-banner img:last-child {
	padding-left: 0;
}
#section1 .text img:nth-of-type(3) {
	width: calc(100% / 1.5);
}
/*========= section2 con1 Blog・News ブログ・お知らせ ===============*/
.accordion-1 {
	width: 100%;
}
.con1 .text {
	padding: 2rem;
}
.eventlist{
	padding: 0;
}
.list-img {
	width: 50% !important;
	margin: auto;
	background: #eee;
	position: relative;
	overflow: hidden;
}
.list-img>* {
	width: 100%;
	height: auto;
}
.list-img .featured-video-plus.fvp-responsive .mejs-container {
	width: 100% !important;
	padding-top: 100% !important;
}
.list-text {
	flex: 2;
}
/*========= section3 usestep 利用までのステップ ===============*/
#section3::before {
	background-position: bottom 50% left 0%;
	bottom: -40%;
	left: -50%;
}
.confirst p {
	padding: 30px 10px;
	margin: 0 auto 20px;
	letter-spacing: .1em;
	font-size: 1.05rem;
}
.Arrowbox {
	width: 40%;
	margin: 30px auto;
}
.Arrow {
	padding: 0 5px!important;
	scale: 1;
	margin: auto 0;
	width: 100% !important;
}
/*========= section4 con2 Smiley works ===============*/
#section4 .heading-1 {
	margin-top: 0;
}
#section4 .heading-3 {
	margin-top: 30px;
}
.worksbox {
	width: 50%;
}
/*========= section5 con3 Creative===============*/
.con3 {
	padding-bottom: 40px;
}
.con3 .uk-card {
	width: calc(100vw / 3.5);
}
.con3 .uk-card .container {
	border-width: 20px;
	width: calc(100vw / 4);
	height: calc(100vw / 4);
	border-image-width: 100px;
}
/*========= section6 con4 Recreation===============*/
#section6 .list1 {
	left: 0px;
	padding: 0 1em .5em;
	width: fit-content;
}
.con4 .list1 {
	position: absolute;
	left: 100px;
	z-index: 1;
	background-color: #eae9e1c9;
}
/*========= footerのCSS ===============*/
.footer-widget {
	margin: 40px 0 30px;
}
.footB ul li a,
.footB ul li p {
	width: 160px;
}

.small-mainimages .wrapper {
	height: 20dvh;
}
main.page .entry-content section {
	padding: 40px 0;
}
.title_1 h2 ,.title_2 h2{
	font-size: 1.5rem;
}
.heading-1 {
	font-size: 1.5rem;
}
.button-flame .main-container {
    gap: 10px;
}
.button-flame.calendar .main-container .button_1{
	margin: 0;
}
.button-flame .main-container .btn-txt {
    font-size: 0.8rem;
}
}
@media (min-width:640px) and (max-width:1199px) and (orientation: portrait)/*(タブレット)*/{
/*========= base ===============*/
html {
	scroll-padding-top: 90px;
}
::-webkit-scrollbar {
	width: 0px;
}
.main-container{
	display: flex;
	flex-direction: column;
	align-items: center;/*中身を中央揃えで表示*/
	justify-content: center;/*両端揃えで表示*/
	padding: 4%;
	margin-left: auto;
	margin-right: auto;
	align-items: flex-start;
}
.title_1::after, .title_1::before {
	width: 100px;
}
.fadeDownTrigger,
.fadeRightTrigger {
	width: 100%;
}
section.sec-content {
	padding: 30px 0 0px !important;
}
.uk-flex {
	flex-direction: column;
}
.main-container>.uk-flex {
	flex-direction: column;
}
/*============ parts ===============*/

.main-title_1 h2 {
	font-size: 1.75rem !important;
	text-align: left;
	margin-left: 0;
}
.main-title_1 h2 span {
	display: inline-block;
	background-image: url(../images/PartsSet/item/波線.svg);
	background-repeat: repeat-x;
	background-size: 330px 2rem;
	padding-bottom: 6px;
	background-position: bottom;
	position: relative;
	width: fit-content;
	height: auto;
}
.main-title_1 h2:after {
	content: none;
}
.main-title_1 h2::before {
	transform: rotate(5deg);
	left: -50px;
	width: 130px;
}
/*============ header ===============*/
header{
	position: fixed;
	top: 0;
	width: 100vw;
	background-color: var(--base-beige-light-clear) !important;
}
header:after {
	width: 300%;
	height: 100%;
	top: 30%;
}
.header-wrapper:has(.headB) {
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transition: opacity 0.6s;
	position: absolute;
	pointer-events: none;
}

.header-wrapper:has(.headB.panelactive) {
	opacity: 1;
	pointer-events: all;
}
/* ---.headA--- */
.headA {
	display: flex;
	justify-content: space-between;
	padding-left: 15px;
	text-decoration: none;
	letter-spacing: 2px;
	z-index: 9999;
}

.headA h2 {
	font-size: 1rem;
}
.headA a.custom-logo-link {
	width: 100%;
}
.headA .custom-logo-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#logo-img {
	width: 40%;
	margin: 0;
}

/* ---ドロップダウン--- */
.headB {
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position: fixed;
	z-index: 999;
	/*ナビのスタート位置と形状*/
	top: 0%;
	right: -120%;
	width: 40%;
	height: 100vh;
	/*ナビの高さ*/
	/*動き*/
	transition: right 0.6s;
	background-color: var(--base-baige-light);
}
/*アクティブクラスがついたら位置を0に*/
.headB.panelactive {
	right: 0;
}
.headB nav {
	position: initial;
	padding-top: 0px;
	display: flex;
	height: 100%;
	align-items: flex-end;
	justify-content: center;
}
.headB #nav {
	width: auto;
	height: 100%;
	left: 0;
	transition: all .6s;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.headB ul {
	background: none;
}
/*ナビゲーションの縦スクロール*/
.headB.panelactive ul {
	/*ナビの数が増えた場合縦スクロール*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
.headB li {
	list-style: none;
}
.headB li a {
	text-decoration: none;
	padding: 10px;
	display: block;
	width: 100%;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.headB .nav li p {
	display: block;
	width: 100%;
	height: 40px;
	text-align: center;
	transition: 0.6s;
}
.headB .sub-menu {
	display: flex;
	flex-flow: column;
	gap: 10px;
	position: static;
	transform: translate(0px, 0px);
	margin-right: auto;
	font-size: 1rem;
	align-items: flex-start;
}
.headB .sub-menu li {
	width: auto;
	text-align: left;
}
.headB nav ul li a {
	text-align: left;
}
.headB nav ul li li a {
	height: auto;
	padding: 0;
	padding-left: 15px;
	min-width: fit-content;
	margin-left: 20px;
}
.headB nav>ul>li>a {
	display: flex;
	align-items: center;
	padding: 0 20px;
	margin-bottom: 20px;
	border-bottom: 2px dotted var(--text-dark-color);
	-webkit-text-stroke: 0.5px;
}
.headB nav>ul>li>a.current {
	border-bottom: none;
}
.headB nav li.menu-item-has-children>a {
	margin-left: 0px;
}
.headB nav>ul>li {
	margin-bottom: 20px;
}
.headB nav li.menu-item-has-children>a>span::before {
	content: none;
}
.headB nav ul li li a span::before {
	content: '';
	position: absolute;
	left: -15px;
	top: 40%;
	width: 10px;
	height: 10px;
	border-top: 1.5px solid var(--text-dark-color);
	border-right: 1.5px solid var(--text-dark-color);
	transform: rotate(180deg) translateY(5px);
	transition: .3s;
	transform-origin: center;
}
/* ---.headC--- */
.headC {
	display: block;
	opacity: 1;
	margin-right: 10px;
	padding: 0;
	border: none;
	outline: none;
	background: none;
	font-size: 28px;
	z-index: 9999;
	cursor: pointer;
}
.headC.active .menu-toggle {
	color: #f3eff2;
}

/*========= mainimages ===============*/
.images2 {
	height: 100%;
}
.images2 picture {
	width: 100%;
}
.images2 img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.img-box {
	background-color: transparent;
	grid-row: 1 / -1;
}
.img-box::before {
	width: 80vw;
	height: 50vh;
	bottom: 55%;
	z-index: -1;
	transform: rotateY(180deg);
	z-index: -1;
	left: 0;
	right: auto;
}
.mainimages .text {
	margin-top: 0;
	grid-column: 1 / 6;
	grid-row: 2;
	background-color: #ffffffad;
	margin-right: 15px;
	border-radius: 10px;
}
.mainimages .text h1 {
	font-size: 11vw;
}
.mainimages .text h2 {
	font-size: 8vw;
	gap: 20px;
}
.mainimages .textbox {
	grid-column: 1 / -1;
}
.mainimages .textbox h3 {
	line-height: 1.8;
	font-size: 1.2rem;
	padding-left: 45px;
	padding: 5px;
	margin-left: 4vw;
	background-color: #ffffffad;
	border-radius: 10px;
}
.anim_text {
	height: 40vh;
	bottom: 60vh;
}
.cloud {
	display: none;
}
.anim_img,.anim_img2,.anim_img3 {
	width: calc(100vw / 5);
}
.anim_img {
	right: 10%;
	bottom: auto;
	top: calc(60px + 10%);
}
.anim_img2 {
	right: 10%;
	top: 25%;
}
.anim_img3 {
	width: calc(100vw / 5);
	right: 0;
	bottom: -25px;
}
.catchcopy {
	flex-flow: column;
}
.catchcopy img {
	width: 80%;
}
.title h2 {
	font-size: 2rem;
	padding-left: 30px;
	padding-bottom: 20px;
	text-align: left;
	padding: 30px 0px 0px;
}
.title::after,
.title::before {
	width: 80px;
	height: 20px;
}
/* ---pagetop--- */
.pagetop {
	width: 100px;
	height: 100px;
	font-size: 1.52rem;
}
/*========= section1 ネットワーク紹介 ===============*/
#section1 svg,
#section1 .slideWindow {
	width: 100%;
}
#section1 h2 {
	margin-left: 0px;
	letter-spacing: .1em;
}
#section1 h3 {
	font-size: 1.15rem;
}
.map {
	width: 100vw;
	margin: 0 -5%;
	padding-bottom: 30px;
}
#section1 .map::before {
	content: url(../images/PartsSet/mapimg/click\ map.svg);
	max-width: 40vw;
}
.CardTitle::before {
	content: none;
}
.CardTitle::after {
	content: "\f148";
	display: inline-block;
	position: relative;
	font-weight: 900;
	padding-right: 5px;
	/*文字との隙間*/
	font-size: 2rem;
	font-family: "Font Awesome 5 Free";
	color: var(--passion-color);
}
.card .content {
	min-height: auto;
}
.backcontent div {
	width: 65%;
	text-align: center;
}
#section1 .mapSlide {
	padding: 20px 0px;
}
#section1 .caption-box {
	max-width: max-content;
}
#section1 .slideWindow {
	padding-top: 40px;
	margin-top: -40px;
}
#section1 .icon-box {
	display: flex;
}
/*========= section2 con1 introduction 取り組み紹介 ===============*/
#section2 .introduction,#section2 .manga {
	width: 100%;
}
#section2 picture>img {
	width: 100vw;
	max-width: none;
	margin-left: -4%;
	height: auto;
	padding: 0;
}
#section2 .point,
#section2 .iconimg {
	width: 100%;
	padding: 0;
	padding-right: 5px;
}
#section2 h3 {
	font-size: 1.35rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}
#section2 .grid {
	padding-top: 20px;
}
#section2 .midasi {
	font-size: 1.15rem;
}
#section2 .move_img {
	width: 80px;
	left: 0;
	bottom: 0;
	top: auto;
}
#section2 .move_img img {
	transform: rotateY(180deg);
}
/*========= confirst section3 地域のHUTA活動情報 ===============*/
.confirst .uk-flex {
	flex-direction: row;
}
.containerbox {
	gap: 50px;
	padding-top: 30px;
}
.containerbox .box {
	width: calc(90% - 10px);
}
/* ---con2 section4 サービス料金--- */
.con2 {
	padding: 100px 0 50px;
}
.con2 .title_2 {
	padding: 20px 0;
}
.con2 .title_2 h3 {
	font-size: 1rem;
}
.serviceprice .block {
	gap: 10px;
	padding-top: 0;
}
.servicetext {
	width: 100%;
}
.servicetext .midasi {
	margin: 0;
}
.servicetext .midasi h3 {
	font-size: 1.35rem;
}
.servicetext .sentence {
	font-size: 1rem;
	padding: 0px;
}
/* ---section5 con3 会員募集--- */

/* ---section6 con4 お問い合わせ --- */
.con4 img {
	width: 75%;
}
.con4 .recreationbox img:nth-of-type(1) {
	padding-right: 15%;
	padding-bottom: 50px;
}
.con4 .recreationbox img:nth-of-type(2) {
	position: absolute;
	bottom: -20px;
	right: 0;
}
.recreationbox {
	justify-content: flex-start;
}

/*========= footer ===============*/
footer{
	width: fit-content;
}
footer .main-container {
	width: 100vw;
	display: block;
}
footer .br {
	display: none;
}
footer nav {
	width: 100%;
}footer .sub-container{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer-widget {
	margin: 40px 25px;
}
.footB div{
	flex: 1;/*1:1の比率で等分割*/
}
.footB a,.footB p{
	font-size: 16px;
}
.footB{
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}
.footB ul {
	padding-top: 10px;
}
.footB ul li a,.footB ul li p {
	display: block;
	/*text-align: left;*/
	text-align: center;
	/*width: 200px;*/
	line-height: 1.5;
}
.footB ul:not(.sub-menu) >li{
	display: inline-block;
}
.footB ul >li:not(:first-child){
	margin: 0px!important;
}
.footB ul li ul li a {/*layer-2▷*/
	border-bottom: none;
}
.copywright{
	font-size: 12px;
	text-align: center;
	font-family: 'Courier New', Courier, monospace;
}
html #wpadminbar {
	height: 46px;
	min-width: 240px;
	display: none;
}
/*========= page ===============*/
main.page .entry-content section {
	padding: 50px 0;
}
.button-flame .main-container {
    gap: 10px;
}
}


@media (max-width:639px)/*(スマホ)*/{
/*========= base ===============*/
::-webkit-scrollbar {
	width: 0px;
}
div.main-container{
	padding: 4%;
	margin-left: auto;
	margin-right: auto;
}
html{
	height: 100%;
	scroll-padding-top: 60px;
}
#page{
	overflow: hidden;
}
body {
  min-height: calc(var(--vh) * 100);
	height: max-content;
}
.mainimages .wrapper, .mainimages .wrapper-blur ,.wrapper-cover{
	height: calc(var(--vh) * 100);
}
section.sec-content {
	padding: 30px 0 0px!important;
}
.uk-flex {
	flex-direction: column;
}

.phone{
	display: block;
}
.pc{
	display: none;
}
.main-container>.uk-flex {
	flex-direction: column;
}
/*============ parts ===============*/

.main-title_1 h2 {
	font-size:1.75rem!important;
	text-align: left;
	margin-left: 0;
}
.main-title_1 h2 span {
	display: inline-block;
	background-image: url(../images/PartsSet/item/波線.svg);
	background-repeat: repeat-x;
	background-size: 330px 2rem;
	padding-bottom: 6px;
	background-position: bottom;
	position: relative;
	width: fit-content;
	height: auto;
}
.main-title_1 h2:after {
	content: none;
}
.main-title_1 h2::before {
	transform: rotate(5deg);
	left: -50px;
	width: 130px;
}
/*============ header ===============*/
header{
	position: fixed;
	top: 0;
	width: 100vw;
	background-color: var(--base-color)!important;
}
header:after {
	width: 300%;
	height: 100%;
	top: 30%;
}
.header-wrapper:has(.headB) {
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transition: opacity 0.6s;
	position: absolute;
	pointer-events: none;
}
.header-wrapper:has(.headB.panelactive) {
	opacity: 1;
	pointer-events: all;
}
/* ---.headA--- */
.headA{
	display: flex;
	justify-content: space-between;
	padding-left: 15px;
	text-decoration: none;
	letter-spacing: 2px;
	z-index: 9999;
}
.headA h2 {
	font-size: 1rem;
}
.headA a.custom-logo-link {
	width: 100%;
}
.headA .custom-logo-link img {
	width: 100%;
  height: 100%;
  object-fit: contain;
}
#logo-img {
	width: 40%;
	margin: 0;
}

/* ---ドロップダウン--- */
.headB.flex{
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:fixed;
	z-index: 999;
	/*ナビのスタート位置と形状*/
	top:0%;
	right: -120%;
	width:60%;
	height: 100vh;/*ナビの高さ*/
	/*動き*/
  transition: right 0.6s;
  background-color: var(--base-baige-light);
}
/*アクティブクラスがついたら位置を0に*/
.headB.panelactive {
	right: 0;
}
.headB nav {
	position: initial;
	padding-top: 0px;
	display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
}
.headB #nav {
	width: auto;
	height: 100%;
	left:0;
	transition: all .6s;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
}
.headB ul {
	background: none;
}
/*ナビゲーションの縦スクロール*/
.headB.panelactive ul{
	/*ナビの数が増えた場合縦スクロール*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
.headB li{
	list-style: none;
}
.headB li a{
	text-decoration: none;
	padding:10px;
	display: block;
	width: 100%;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.headB .nav li p{
	display: block;
	width: 100%;
	height: 40px;
	text-align: center;
	transition: 0.6s;
}
.headB .sub-menu{
	display: flex;
  flex-flow: column;
  gap: 10px;
  position: static;
  transform: translate(0px, 0px);
  margin-right: auto;
  font-size: 1rem;
  align-items: flex-start;
}
.headB .sub-menu li{
	width: auto;
	text-align: left;
}
.headB nav ul li a {
	text-align: left;
}
.headB nav ul li li a{
	height: auto;
  padding: 0;
  padding-left: 15px;
  min-width: fit-content;
  margin-left: 20px;
}
.headB nav>ul>li>a {
	display: flex;
	align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
  border-bottom: 2px dotted var(--text-dark-color);
	-webkit-text-stroke: 0.5px;
}
.headB nav>ul>li>a.current {
	border-bottom: none;
}
.headB nav li.menu-item-has-children>a {
	margin-left: 0px;
}
.headB nav>ul>li {
  margin-bottom: 20px;
}
.headB nav>ul>li:first-child {
	margin-top: 50px;
}
.headB nav li.menu-item-has-children>a>span::before {
	content: none;
}
.headB nav ul li li a span::before {
	content: '';
	position: absolute;
	left: -15px;
	top: 40%;
	width: 10px;
	height: 10px;
	border-top: 1.5px solid var(--text-dark-color);
	border-right: 1.5px solid var(--text-dark-color);
	transform: rotate(180deg) translateY(5px);
	transition: .3s;
	transform-origin: center;
}
/* ---ハンバーガー headC--- */
.headC {
	position: relative;
	display: block;
	opacity: 1;
	margin-right: 10px;
	padding: 0;
	border: none;
	outline: none;
	background: none;
	font-size: 28px;
	z-index: 9999;
	cursor: pointer;
	/*リンクにカーソルを重ねたとき、形を手の形状に変更*/
}
.headC.active .menu-toggle {
	color: #f3eff2;
}

/*========= mainimages ===============*/
.images2 {
	height: 100%;
}
.images2 picture {
	width: 100%;
}
.images2 img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.img-box {
	background-color: transparent;
	grid-row: 1 / -1;
}
.img-box::before {
	width: 80vw;
	height: 50vh;
	bottom: 55%;
	z-index: -1;
	transform: rotateY(180deg);
  z-index: -1;
  left: 0;
  right: auto;
}
.mainimages .text {
	margin-top: 0;
  grid-column: 1 / 6;
  grid-row: 2;
  background-color: #ffffffad;
  margin-right: 15px;
  border-radius: 10px;
}
.mainimages .text h1 {
	font-size: 11vw;
}
.mainimages .text h2 {
	font-size: 8vw;
	gap: 20px;
}
.mainimages .textbox {
	grid-column: 1 / -1;
}
.mainimages .textbox h3 {
	line-height: 1.8;
	font-size: 1.2rem;
	padding-left: 45px;
	padding: 5px;
	margin-left: 4vw;
	background-color: #ffffffad;
	border-radius: 10px;
}
.anim_text {
	height: 40vh;
	bottom: 60vh;
}
.cloud {
	display: none;
}
.anim_img, .anim_img2, .anim_img3 {
	width: calc(100vw / 5);
}
.anim_img {
	right: 10%;
	bottom: auto;
	top: calc(60px + 10%);
}
.anim_img2 {
	right: 10%;
	top: 25%;
}
.anim_img3 {
	width: calc(100vw / 5);
	right: 0;
	bottom: -25px;
}
.catchcopy {
	flex-flow: column;
}
.catchcopy img {
	width: 80%;
}
.title h2 {
	font-size: 2rem;
	padding-left: 30px;
	padding-bottom: 20px;
	text-align: left;
	padding: 30px 0px 0px;
}
.title::after, .title::before {
	width: 80px;
	height: 20px;
}

/*========= pagetop ===============*/
.pagetop {
	right: 20px;
	bottom: 20px;
	width: 100px;
	height: 100px;
	font-size: 1.5rem;
}
/*========= section1 ネットワーク紹介 ===============*/

#section1 svg,#section1 .slideWindow {
	width: 100%;
}
#section1 h2 {
	margin-left: 0px;
	letter-spacing: .1em;
}

#section1 h3 {
	font-size: 1.15rem;
}

.map {
	width: 100vw;
	margin: 0 -5%;
	padding-bottom: 30px;
}
#section1 .map::before {
	content: url(../images/PartsSet/mapimg/click\ map.svg);
	max-width: 40vw;
}
.CardTitle::before {
	content: none;
}

.CardTitle::after {
	content: "\f148";
	display: inline-block;
	position: relative;
	font-weight: 900;
	padding-right: 5px;
	/*文字との隙間*/
	font-size: 2rem;
	font-family: "Font Awesome 5 Free";
	color: var(--passion-color);
}
.card .content {
	min-height: auto;
}
.backcontent div {
	width: 65%;
	text-align: center;
}
#section1 .mapSlide {
	padding: 20px 0px;
}
#section1 .caption-box {
	max-width: max-content;
}
#section1 .slideWindow {
	padding-top: 40px;
	margin-top: -40px;
}
#section1 .icon-box {
	display: flex;
}
/*========= section2 con1 introduction 取り組み紹介 ===============*/
#section2 .introduction,#section2 .manga {
	width: 100%;
}
#section2 picture>img {
  width: 100vw;
  max-width: none;
  margin-left: -4%;
  height: auto;
  padding: 0;
}
#section2 .point,#section2 .iconimg {
	width: 100%;
  padding: 0;
  padding-right: 5px;
}
#section2 h3 {
	font-size: 1.35rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}
#section2 .grid {
 	padding-top: 20px;
}
#section2 .midasi {
	font-size: 1.15rem;
}

#section2 .move_img {
	width: 80px;
	left: 0;
	bottom: 0;
  top: auto;
}
#section2 .move_img img{
	transform: rotateY(180deg);
}
/*========= confirst section3 地域のHUTA活動情報 ===============*/
.containerbox {
	flex-direction: column;
}
.containerbox .box {
	width: 100%;
	aspect-ratio: 2 / 3;
	margin-top: 1.25rem;
}
.containerbox .box::before {
	height: 35%;
	font-size: 2rem;
	white-space: nowrap;
	z-index: 1;
}
.containerbox .box .news-img {
	grid-column: 1;
	grid-row: 2;
}
.containerbox .box .news-content {
	grid-column: 1 / -1;
	margin: auto;
}
.containerbox .box .news-title {
	width: 100%;
	top: auto;

	bottom: 100%;
	transform: translate(0%, 0%);
	text-align: left;
	padding: 10px 5px;
	font-size: 1.25rem;
}
.containerbox .box.comingsoon {
	height: 240px;
}
.containerbox .box.comingsoon .news-not {
	font-size: 1.75rem;
}
.containerbox .box.comingsoon::before {
  height: 80%;
}
/* ---con2 section4 サービス料金--- */
.con2 {
	padding: 100px 0 50px;
}
.con2 .title_2 {
	padding: 20px 0;
}
.con2 .title_2 h3 {
	font-size: 1rem;
}
.serviceprice .block {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 0;
}
.servicetext {
	width: 100%;
}
.serviceimg{
	width: 60%;
}
.servicetext .midasi {
	margin: 0;
}
.servicetext .midasi h3 {
	font-size: 1.25rem;
}
.servicetext .sentence {
	font-size: 1rem;
	padding: 0px;
}
/* ---section5 con3 会員募集--- */
.con3 {
	padding: 40px 0 40px;
}
.member-join ,.member-join .block.full .flex {
	flex-direction: column
}
.member-join .block.half,.member-join .block.full .sentence {
	width: 100%;
}

.member-join {
	gap: 50px;
}
.member-join .midasi {
	padding: 20px 20px;
	margin: 10px auto 15px;
}
.midasi h3{
	font-size: 1.25rem;
	line-height: 1;
}

.member-join .sentence {
	border: #fff 4px solid;
	padding: 20px 10px;
	height: calc(100% - 110px);
}
.member-join h4:not(.ribbon) {
	margin: 20px 0;
	font-size: 1.05rem;
}
.member-join h5 {
	font-size: 1.05rem;
}
.list-number {
	padding: 0.5em;
	margin: 0;
	border-radius: 33px;
	margin-top: calc(1rem + 20px);
}
.list-number:after {
	bottom: calc(100% - 12px);
}
.list-number li:before {
	top: calc(1.1rem + 7px);
}
.list-number p {
	margin: 10px 0;
}
/*========= section6 con4 お問い合わせ===============*/

.form-container {
	margin: 0px;
	padding: 15px 5px;
}
.form {
	flex-direction: column
}
.form-left,
.form-right {
	width: 100%;
}
section.sec-content.con4 {
	padding-bottom: 240px!important;
}

.form .heading {
	font-size: 1.25rem;
	margin: 15px 0;
	margin-bottom: 5px;
}

/*========= footer ===============*/
footer {
	background-image: linear-gradient(0deg, #233a52, #233a52 60%, transparent 80%), url(../images/PartsSet/街02.png);
	background-size: 100%, auto 60%;
}
.footer-widget {
	margin: 300px 4% 30px;
}
footer .sub-container{
	flex-direction: column;
}
.footA {
  display: flex;
	flex-direction: row-reverse;
}
.site-name {
	font-size: 1.1rem;
	text-align: right;
}
.footA a{
	margin: 0;
}
.footA-2 .widget ul {
	text-align: right;
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	justify-content: space-between;
}
.footA-2 li a {
	font-size: 1rem;
}
.footA img {
	width: auto;
	max-width: 30vw;
	margin: 0;
}
footer #logo-img {
	width: auto;
}

/*============= page ============*/
.list ul li a {
	flex-flow: column;
}
.list .photo{
	flex: auto;
	height: 200px;
}
.single-page .hentry {
	flex-flow: column;
}
.text#planetext {
	padding: 10px 20px 50px;
}

/*============= page-blog ============*/
.breadcrumbsWrap {
	padding: 0px 10px!important;
}
.button-flame .main-container  {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
}