@charset "utf-8";


/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width:1px) and (max-width:960px){
/*==========================================
 body
===========================================*/
body {
	min-width: 100%;
	text-align: center;
	width: 100%;
}
    
/*==========================================
Other
===========================================*/
header {
padding-top: 20px;
    padding-bottom: 20px;
}

#mainImg {
    width: calc(100% - 40px);
    border-radius: 20px;
}

#mainImg section p {
	font-size: 2em;
	padding-bottom: 20px;
	text-align: left;
}

#mainImg section h1 {
	font-size: 1.2em;
text-align: left;
}

#topMessage {
    right: 3%;
    bottom: -3%;
    border-radius: 16px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.mBox p {
    font-size: 1.2em;
}

.mBox figure {
    top: -28px;
    left: -75px;
}

nav.NavMenu {
width: 50%;	/*全幅表示*/
}

#what-is-girl-scouts {
	padding-bottom: 50px;
	padding-top: 50px;
}

#about-us-Block {
	padding-top: 50px;
}

#about-us ul {
	margin-top: 50px;
}

#our-members section figure {
	max-width: 333px;
	min-width: 333px;
}

#qa {
    margin-top: -40px;
}

#gs03 {
	position: static;
	right: 0px;
	bottom: 0px;
	margin-top: 15px;
}

#contactForm {
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 50px;
	padding-left: 30px;
}

#contactForm h3 {
    font-size: 1.200em;
}

#contactForm dl dd input {
width: 100%;
}

#contactInfo {
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 30px;
}

#ctinfo_block figure {
    margin-right: 20px;
    margin-left: 20px;
    max-width: 150px;
    min-width: 150px;
}

#info_block figure {
max-width: 300px;
min-width: 300px;
margin-left: 20px;
margin-right: 20px;
}
}


@media only screen and (max-width:768px){
/*==========================================
 Other
===========================================*/
#contactForm dl {
	margin-top: 30px;
}

#contactForm dl dt {
	width: 100%;
	margin-bottom: 8px;
	font-weight: 600;
}

#contactForm dl dd {
width: 100%;
	margin-bottom: 28px;
}

span.wpcf7-form-control-wrap {
    font-size: 15px;
}

#our-members {
    background-position: center top -30px;
}

#our-members section figure {
	max-width: 80%;
	min-width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
}

#our-members section.reverse figure {
	margin-right: 0px;
	margin-left: 0px;
		margin-left: auto;
	margin-right: auto;
}

#our-members section {
	display: block;
}

nav.NavMenu {
width: 100%;	/*全幅表示*/
}


#what-is-girl-scouts_block {
	display: block;
	margin-top: 50px;
}

#what-is-girl-scouts_block figure {
margin-left: auto;
margin-right: auto;
}

.check {
    margin-top: 50px;
}

#c_box {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
}

.f01 {
	display: none;
}

#c_box .inner .member {
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}

#fontStyle {
font-size: 1.125em;
	margin-top: 30px;
}

#qa {
    margin-top: -36px;
}

#qa {
    background-size: 150% auto;
    margin-top: -40px;
}

#qa .t_deco {
    top: 5px;
}

#qaImg {
    right: 20px;
    top: 18px;
}

#contactTop h2 {
font-size: 1.8em;
}

.tbbr {
	display: inherit;
}

#contactForm h3 {
    border-radius: 10px;
}

#ctInfo_img {
top: -65px;
}

#contactInfo h2 {
font-size: 1.8em;
}

#contactInfo h2 img {
    margin-right: 20px;
}

#ctinfo_block section h3 {
	font-size: 1.250em;
	margin-bottom: 15px;
	text-align: center;
}

#ctinfo_block {
    display: block;
}

#ctinfo_block figure {
	max-width: auto;
	min-width: auto;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

#info_block dl {
	display: block;
}

#info_block dl dt {
	width: 100%;
	border-bottom: 0px dotted #000000;
	margin-bottom: 7px;
	padding-bottom: 0px;
	font-size: 1em;
}

#info_block dl dd {
width: 100%;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

#info_tit {
    padding-top: 70px;
}

#info_block {
	display: block;
}

#info_block figure {
	max-width: auto;
	min-width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

#information .t_deco {
    font-size: 5em;
    top: -13px;
    left: 0px;
}

#info_tit figure {
        right: -19px;
        top: -44px;
    }
	
#information ul {
justify-content: center;
}
	
#information ul li {
	width: 47%;
	margin-bottom: 15px;
	text-align: center;
	margin-left: 1.5%;
	margin-right: 1.5%;
}

footer {
    padding-top: 30px;
    padding-bottom: 30px;
}

#page-top {
    bottom: 22px;
}

#information {
    padding-bottom: 100px;
}


}
@media only screen and (max-width: 470px){
	#contactTop h3 {
	font-weight: 600;
	}
}

@media only screen and (max-width: 470px){
/*==========================================
 幅470px以下から ヘッダー等微調節
===========================================*/
#fontStyle {
    color: #114559;
}

#information {
    padding-bottom: 70px;
}

footer {
    padding-top: 15px;
    padding-bottom: 90px;
}

#page-top {
    bottom: 82px;
}

#f_Menu {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: #e6553c;
	display: inherit;
	padding-top: 10px;
	padding-bottom: 10px;
}

p.top_comment {
    position: absolute;
    right: 8px;
    bottom: 15px;
    color: #ffffff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    font-size: 15px;
	display: block;
}

#f_Menu ul {
	max-width: 100%;
	width: calc(100% - 2em);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
}

#f_Menu ul li {
	width: 48%;
	font-size: 0.750em;
}

#f_Menu ul li a {
	background-color: #FFFFFF;
	border-radius: 10px;
	display: block;
	height: 57px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}

#f_Menu ul li a:hover {
	background-color: #BCDF7F;
	color: #000000;
}

#f_Menu ul li a span {
	position: relative;
}

#f_Menu ul li a span img {
	position: absolute;
	right: 5px;
	top: -7px;
}

#page-top img {
	width: 76px;
	height: auto;
}

#copy {
	font-size: 0.750em;
	text-align: left;
}

#information ul li {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}

#info_tit figure {
        right: -19px;
        top: -14px;
    }
	
#information .t_deco {
    font-size: 3.5em;
    top: 10px;
    left: -14px;
}

#ctinfo_block {
    padding-top: 20px;
    margin-top: 20px;
}

#contactInfo h2 img {
	margin-right: 0px;
	width: 58px;
	height: auto;
	margin-bottom: 10px;
}

#contactInfo h2 {
	font-size: 1.563em;
	margin-top: 0px;
	flex-direction: column;
	line-height: 1.5;
}

#ctInfo_img {
        top: -40px;
        left: 56px;
        width: 80px;
    }

#contactInfo {
    margin-top: 60px;
    padding-top: 30px;
    padding-right: 15px;
    padding-bottom: 30px;
    padding-left: 16px;
}

.font_left {
	text-align: left;
}

#contactForm h3 {
	font-size: 1.250em;
	border-radius: 7px;
	margin-bottom: 20px;
}

    #contactForm {
        padding-top: 28px;
        padding-right: 16px;
        padding-bottom: 28px;
        padding-left: 16px;
    }
	
#ct_tit h2 {
font-size: 1.250em;
	margin-right: 0px;
}

#mail {
	width: 90px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#contactTop h3 {
	font-size: 1.4em;
}

#gs03 {
	right: 0px;
	bottom: 0px;
	width: 100px;
	text-align: center;
	margin-left: auto;
margin-right: auto;
}

#contactImg {
	right: 10px;
	top: -130px;
	width: 70px;
}

#contact .t_deco {
    font-size: 4.5em;
}

#contactTop h2 {
font-size: 1.563em;
}
#qaTit {
    margin-bottom: 30px;
}

#qa section h3 {
	font-size: 1em;
}

#qaImg {
	right: -4px;
	top: -24px;
	width: 58px;
}

#qaImg2 {
        right: -17px;
        top: -20px;
        width: 74px;
    }

#qa .inner {
    padding-top: 50px;
}

#qa .t_deco {
    font-size: 5em;
    top: -30px;
    left: -15px;
}

    #our-members {
        background-position: center top -25px;
			background-size: 200% auto;
    }
	
#qa {
	margin-top: -30px;
	background-size: 200% auto;
}
	
#our-members section {
    padding-bottom: 50px;
}

#our-members .inner .titleStyle {
	display: block;
	margin-bottom: 20px;
}

#our-members .inner .titleStyle figure {
	width: 87px;
	position: absolute;
	right: 0px;
	bottom: 50px;
}

#our-members .inner .t_deco {
    font-size: 3.5em;
    top: -31px;
    line-height: 1;
}

#our-members .m_comm h3 {
        font-size: clamp(18px, 5vw, 1.25em);
        font-weight: 600;
	margin-bottom: 18px;
}

#our-members section figure {
	max-width: 100%;
	min-width: 100%;
}

.f02 {
	display: inherit;
	margin-top: 15px;
}

#c_box {
	border: 5px solid #3CB8E6;
	border-radius: 15px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}

#c_box h2 {
	font-size: 1.500em;
}

#about-us .t_deco {
    font-size: 4.438em;
}

#about-us-Block {
        padding-top: 20px;
    }
	
#about-us ul {
	margin-top: 20px;
	display: block;
}

#about-us ul li {
	width: 100%;
	text-align: center;
}

#what-is-girl-scouts_block section h3 {
font-size: 1.2em;
	margin-bottom: 30px;
}

.spImg {
    display: inherit;
	margin-left: auto;
margin-right: auto;
}

.pcImg {
    display: none;
}

.Toggle {
	width: 66px;
	height: 66px;
}

.Toggle span {
	width: 27px;
	margin-bottom: 7px;
}

.Toggle p {
	font-size: 0.625em;
	margin-top: 6px;
}

.Toggle.active span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}

	.Toggle.active span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}


header {
	padding-top: 13px;
	padding-bottom: 13px;
	height: calc(150vw - 85px);
}
    	
#mainImg {
	max-width: 100%;
	width: calc(100% - 2em);
	background-image: url(../images/main_img_sp.png);
	border-radius: 18px;
	align-items: flex-start;
}

#mainImg section {
	margin-top: 20px;
}

#mainImg section p {
	font-size: 1.125em;
	line-height: 1.3;
	padding-bottom: 5px;
	text-align: left;
}

#mainImg section h1 {
font-size: 0.90em;
text-align: left;
}
	
#mainImg section h1 span {
    display: block;
    background: #002119;
    width: 200px;
    text-align: center;
    padding: 3px;
    box-sizing: border-box;
}

.spbr {
	display: inherit;
}

#topMessage {
	position: absolute;
	right: 15px;
	bottom: 65px;
	border: 5px solid #e63c5a;
	border-radius: 10px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.mBox p {
	font-size: 1em;
	line-height: 1.3;
	font-weight: 600;
}

.mBox figure {
        top: -10px;
        left: -28px;
        width: 57px;
    }
}

@media only screen and (max-width: 320px){
/*==========================================
 幅320px以下から ヘッダー等微調節
===========================================*/
#qa section h3 span {
align-items: flex-start;
}
}



/* ========== レスポンシブ最適化 ========== */
@media (max-width: 480px) {
  .modal-content {
    width: 80%;
    border-radius: 12px;
    padding: 16px 16px 12px;
    font-size: 15px;
	box-sizing: border-box;
  }
  .modal-body { max-height: calc(85vh - 110px); }
}

@media (min-width: 768px) {
  .modal-content { padding: 22px 22px 18px; }
}

/* ========== ダークモード対応（任意） ========== */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background: #1d1f21;
    color: #e8e8e8;
    box-shadow:
      0 10px 30px rgba(0,0,0,.5),
      0 2px 8px rgba(0,0,0,.35);
  }
  .modal-content h3 { border-left-color: #81c784; }
  .modal-close { color: #eee; }
  .modal-close:hover,
  .modal-close:focus { background: rgba(255,255,255,.08); }
}

/* ========== 低モーション環境 ========== */
@media (prefers-reduced-motion: no-preference) {
  .modal.is-open .modal-content {
    animation: modalIn .16s ease-out;
  }
  @keyframes modalIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
}