@charset  "utf-8";
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap");
* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	border: none;
	font-family: "BIZ UDPGothic", sans-serif;
	font-size: 100%;
	text-align: center;
}

h2 {
	margin-bottom: 50px;
}

button {
	font-family: "BIZ UDPGothic", sans-serif;
}


/***** 共通コンポーネント *****/
.lp_btn_rule {
	font-size: 14px;
	text-decoration: none;
    background-color: transparent;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.browser_btn {
	padding: 10px 0;
	width: 163px;
    color: #EE5777;
    border: 1px solid #EE5777;
}
.browser_btn:hover {
	color: #EE5777;
    background-color: rgba(238, 87, 119, 0.4);
}

.voice_btn {
	padding: 10px 0;
	width: 163px;
    color: #1D1C1C;
    border: 1px solid #AAAAAA;
	text-wrap: nowrap;
}
.voice_btn:hover {
    background-color: rgba(220, 220, 219, 1.0);
    border-color: #888888;
}

.voice_btn_backnumber {
    color: #1D1C1C;
    border: 1px solid #AAAAAA;
	text-wrap: nowrap;

	padding: 10px 0;
	width: 100%;
}
.voice_btn_backnumber:hover {
    background-color: rgba(220, 220, 219, 1.0);
    border-color: #888888;
}

.button-icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 2px;
    vertical-align: -3px; 
    display: inline-block;
}

.lp_bubble {
	position: relative;
	padding: 8px 2px;
    width: 250px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
	background: #75bee9;
    letter-spacing: 5px;
	border-radius: 33px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    -o-border-radius: 33px;
    -ms-border-radius: 33px;
}

.lp_bubble:before {
	content: "";
	position: absolute;
	left: 45%;
    bottom: -19px;
    border: 10px solid transparent;
    border-top-color: #75bee9;
}

.lp_band {
	margin: auto;
	width: clamp(332px, 80vw, 635px);
	height: auto;
	background-color: #ee5877;
}

.lp_band p {
	color: #fff;
	letter-spacing: 4px;
	line-height: 1;
	font-size: 120%;
	padding: 10px 0;
}

.lp_section {
	display: flex;
	align-items: center; 
	flex-direction: column;
	margin-bottom: clamp(12px, 3vw, 48px);
    gap: 2rem; 
}

.lp_apps_btn_outer a:hover, .lp_bottom_apps a:hover  {
	opacity: 0.5;
	transition: all 0.3s ease;
}


/***** 広報紙のサイズ別css *****/
.booklet_link {
	color: #000;
    text-decoration: none;
	display: block;
	overflow: hidden;
	min-width: 0;
}

.booklet_date {
	width: 100%;
	height: clamp(23px, 5vw, 31px);
	font-size: 14px;
	line-height: clamp(23px, 5vw, 31px);
	text-align: center;
	border-bottom: 1px solid #000;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.booklet_date span {
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}


.booklet_img_big {
	width: clamp(200px, 30vw, 350px);
	border: 1px solid #D9D9D9;
	box-sizing: border-box;
}

.booklet_img_middle {
	width: clamp(100px, 20vw, 180px);
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
}

.booklet_img_small {
	width: clamp(100px, 20vw, 150px);
	aspect-ratio: 2 / 3;
	display: block;
}


/***** 最新号表示レイアウト *****/
.lp_section h2 {
	margin-bottom: 10px;
}

.lp_header {
	width: 100%;
	background-image: url(/img/web_sites/line_01.png);
	background-position: center top;
	background-repeat: repeat-x;
}

.lp_header_logo {
  	display: block;
	padding: clamp(16px, 3vw, 24px) clamp(32px, 4vw, 48px) 0;
  	width: clamp(100px, 20vw, 200px);
}

.lp_apps_area {
	display: grid;
	font-size: 16px;
	padding: 32px 0;
	gap: 24px;
}

.lp_btn_wrapper {
	display: flex;
	justify-content: center;
	gap: 24px;
	width: clamp(200px, 100vw, 350px);
	flex-wrap: wrap;
}


/***** バックナンバー一覧レイアウト *****/
.backnumber_wrapper {
	display: flex;
	padding: 64px 0;
	background-color: #F8F7F4;
	align-items: center; 
	justify-content: center;
	flex-direction: column;
}

.backnumber_list_middle {
	display: grid;
	min-width: 332px;
	max-width: 936px;
  	gap: clamp(16px, 3vw, 48px);

   	grid-template-columns: repeat(
    	auto-fit,
    	minmax(
      		clamp( 100px, 15vw, 180px),
      		1fr
    	)
  	);
}

.booklet_item_middle {
	display: grid;
	gap: clamp(6px, 2vw, 16px);
	width: clamp(100px, 20vw, 180px);
	list-style: none;
}

.backnumber_list_small{
	gap: 18px;
	width: 100%;
	display: grid;
	justify-content: start;
	--cols: 6;
	grid-template-columns: repeat(var(--cols), minmax(100px, 1fr));
}

.booklet_item_small {
	width: clamp(100px, 20vw, 150px);
	list-style: none;
}


/***** アコーディオンメニュー *****/
.accordion_wrapper {
	display: grid;
	gap: 24px;
	width: clamp(332px, 86vw, 990px);
	max-width: 990px;
	margin: auto;
}

.accordion_content {
	display: grid;
	gap: 24px;
}

.accordion_header {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	font-size: 20px;
	cursor: pointer;
}

.accordion_header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: #DADADA;
	opacity: 1;
	transition: opacity 0.2s ease;
}
  
.accordion_header.open::after {
	opacity: 0;
}

.accordion_header_icon {
	width: 24px;
 	height: 24px;
  	border-radius: 50%;
 	background: #EE5877;
	transition-duration: 0.5s;
}

.accordion_header.open .accordion_header_icon {
	background: #341635;
	transition-duration: 0.5s;
}

.accordion_header_icon_line {
	display: block;
	position: relative;
	width: 12px;
	height: 12px;
}

.accordion_header_icon_line:after {
	position: absolute;
	content: '';
	width: 12px;
	height: 2px;
	top: 11px;
	left: 6px;
	border-radius: 10px;
	background-color: #fff;
	transition-duration: 0.5s;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.accordion_header.open .accordion_header_icon_line:after {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	transition-duration: 0.5s;
}

.accordion_header_icon_line:before {
	position: absolute;
	content: '';
	width: 12px;
	height: 2px;
	top: 11px;
	left: 6px;
	border-radius: 10px;
	background-color: #fff;
	transition-duration: 0.5s;
}

.accordion_header.open .accordion_header_icon_line:before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	transition-duration: 0.5s;
}

.accordion_body {
	display: grid;
	justify-content: center;
	container-type: inline-size;
	overflow-x: clip;
}

.accordion_controls {
	display: flex;
	margin-top: 32px;
	font-size: 16px;
	font-weight: bold;
}

.accordion_more {
	display: inline-flex;
	align-items: center; 
	margin: 0 auto;
	gap: 8px;
	cursor: pointer;
}

.accordion_more_icon{
	display: inline-block;
	width: 12px;
	height: 12px;
	position: relative;
}
  
.accordion_more_icon::before,
.accordion_more_icon::after{
	position: absolute;
	content: "";
	width: 8px;
	height: 2px;
	top: 3px;
	background: #23221E;
	border-radius: 10px;
	transform: translateY(-50%);
}
  
.accordion_more_icon::before{
	left: 1px;
	transform: rotate(45deg);
	transform-origin: left center;
}
  
.accordion_more_icon::after{
	right:1px;
	transform: rotate(-45deg);
	transform-origin: right center;
}

.accordion_close {
	display: inline-flex;
	align-items: center; 
	margin: 0 auto;
	gap: 8px;
	cursor: pointer;
}

.accordion_close_icon{
	display:inline-block;
	position:relative;
	align-items: center;
	width:12px;
	height:12px;
}
  
.accordion_close_icon::before,
.accordion_close_icon::after{
	position:absolute;
	content:"";
	width:8px;
	height:2px;
	top:2px;
	background:#23221E;
	border-radius:10px;
}
  
.accordion_close_icon::before{
	left:6px;
	transform: rotate(45deg);
	transform-origin: left center;
}
  
.accordion_close_icon::after{
	right:5px;
	transform: rotate(-45deg);
	transform-origin: right center;
}



/***** 画面下部レイアウト *****/
.bg02 {
	position: relative;
	width: 100% !important;
	padding: 0 0 100px;
	background-image: url(/img/web_sites/decobg_02.png);
	background-size: 1200px;
	background-position: bottom;
	background-repeat: repeat-x;
}

.lp_bottom_wrapper {
	display: flex;
	margin: 64px auto;
	gap: 48px;
	width: fit-content;
	max-width: 640px;
	justify-content: space-between;
}

.lp_bottom_content_left {
	display: grid;
	gap: 16px;
	justify-items: center;
}

.lp_bottom_logo {
	margin: 24px 0;
	width: clamp(180px, 40vw, 400px);
	object-fit: contain;
}

.lp_bottom_text {
	font-size: 17.6px;
	font-weight: bold;
}

.lp_bottom_apps {
	display: flex;
	gap: 8px;
}

.lp_bottom_hide {
	display: none;
}

.lp_bottom_spimg {
	margin: 0;
	width: clamp(150px, 20vw, 190px);
}

.lp_bottom_annotation {
	color: #969595;
	font-size: 70%;
	line-height: 1.7;
}

.lp_bottom_content_right {
	width: 190px;
}

.lp_apps_btn_outer {
	display: flex;
	gap: 48px;
}


/***** フッター *****/
footer {
	padding: 32px 0;
}

.list-inline {
	list-style: outside none none;
	margin-left: -5px;
	padding-left: 0;
	position: relative;
	top: -35px;
}

.list-inline > li {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
}

.lp_foot_list {
	line-height: 2.0;
}

#footer-nav {
	padding-top: 30px;
}

#footer-nav a {
	border-bottom: 2px solid #fff;
	padding-bottom: 5px;
	color: #ee5877;
	text-decoration: none;
	transition: all .3s ease 0;
	background: transparent none repeat scroll 0 0;
}

#footer-nav a:hover {
	color: #f5a0b1;
	text-decoration: none;
	border-bottom: 2px solid #bbb;
	transition: all 0.3s ease;
}

.footer_copyright {
	font-size: 18px;
	color: #999;
	text-decoration: none;
	margin: 0;
}

/***** レスポンシブ対応 *****/
@media (max-width: 1279px) {
	.backnumber_list_small { --cols: 5; }
}

@media (max-width: 1023px) {
	.backnumber_list_small { --cols: 4; }
	.bg02 { background-size: 700px; }
	.lp_bottom_wrapper { gap: 24px; }
	.footer_copyright { font-size: 14px; }
}

@media (max-width: 767px) {
	.backnumber_list_small { --cols: 3; }	
	body { padding: 0; margin: 0; }
	.lp_band p { letter-spacing: 2px; font-size: 14px; }
	.voice_btn_backnumber { padding: 8px;  font-size: 10px; }
	.voice_btn_backnumber .button-icon { width: 13px !important; height: 13px !important; }
	.lp_bottom_wrapper { gap: 0px; font-size: 14px; }
	.lp_bottom_text { display: none; }
	.lp_bottom_apps { display: grid; }
	.lp_bottom_content_right { margin-top: 24px; }
	#footer-nav { margin: 0 18px; font-size: 14px; }
}

@media (max-width: 575px) {
	.lp_header { padding-bottom: 24px; }
	.lp_btn_wrapper { display: grid; }
	.lp_btn_wrapper button { width: 200px; }
	.lp_apps_area { font-size: 14px; }
	.lp_apps_btn_outer { display: grid; gap: 8px; }
	.bg02 { padding-bottom: 100px; }
	.lp_bottom_hide { display: flex; }
	.lp_bottom_wrapper { display: grid; place-content: center; place-items: center; }
	.lp_bottom_content_right{ display: none; }
	.lp_bottom_logo { object-fit: cover; object-position: top; margin: 0; width: 100%; max-width: 180px; height: 40px; }
	.lp_bottom_content_left { gap: 32px; }
	#footer { padding-top: 32px; }
}

@media (max-width: 374px) {
	.backnumber_list_small { --cols: 2; }	
}