@charset "UTF-8";

/* CSS変数(カラー定義) → HTMLにコピペする用 */
/*
:root {
	--primary-color: hsl(196,80%,61%);
	--secondary-color: hsl(351,92%,60%);
	--primary-text: hsl(0,0%,15%);
	--secondary-text: hsl(0,0%,35%);
	--primary-color-text: hsl(0,0%,100%,1);
	--secondary-color-text: hsla(160, 82%, 37%, 1);
	--background: linear-gradient(180deg, hsl(219,92%,95%) 0%, hsl(217,92%,90%) 100%);
	--background-primary: hsl(196,80%,96%);
	--background-secondary: hsl(0,0%,100%);
		
	--border: hsl(0,0%,85%);
	
} /*


/*────────────────────────────────────────────────*/


/* CSS Document */
html {
	/* フォントファミリー指定 */
	font-family: 'Noto Sans JP','Khula', sans-serif;
	scroll-behavior: smooth;
	height: 100%;
}

/* 背景指定用 */
body {
	height: 100%;
	background: var(--background) no-repeat center / cover fixed; 
}

main {
	background: var(--background) center / fixed;
}

/*ページを構成する三大要素*/

/* ヘッダー共通設計 */
header {
	height: auto;
	min-height: min(6.4vw,24px);
	width: 100%;
	margin: 0 auto;
	margin-bottom: min(8.533333333333333vw,32px);
}

header > img {
	display: block;
	width: min(100vw,600px);
	margin: 0 auto;
	border-radius: 0;
	margin-bottom: 0!important;
}

/* ヘッダー個別設計 */
.Top_No_Img {
	display: block;
	width: min(100vw,600px);
	margin: 0 auto;
	padding-top: min(6.4vw,24px);
	padding-right: min(6.4vw,24px);
	padding-left: min(6.4vw,24px);
	margin-bottom: min(6.4vw,24px);
}

.Top_Img {
	padding: 0;
}


/* wrapper共通設計 */
wrapper {
	position: relative;
	display: block;
	height: auto;
	margin: 0 auto;
	margin-right: min(3.2vw,12px);
	margin-left: min(3.2vw,12px);
}

article {
	width: 100%;
	margin: 0 auto;
	margin-top: min(6.4vw,24px);
}

article img {
	margin-bottom: min(8.533333333333333vw,32px);
}

/* section共通設計 */
:is(section,.Community_2) {
	position: relative;
	padding-top: min(6.4vw,24px);
	padding-bottom: min(6.4vw,24px);
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	margin-bottom: min(8.533333333333333vw,32px);
	border-radius: min(2.666666666666667vw,10px);
	border: none;
}

:is(section,.Community_2):after {
	z-index: 2;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: hsla(0,0%,100%,1);
	border-radius: min(2.666666666666667vw,10px);
	filter: drop-shadow(0px 0px 1px rgba(48, 49, 51, 0.05)) drop-shadow(0px 4px 8px rgba(48, 49, 51, 0.3));
	border: none;
	mix-blend-mode: overlay;
	opacity: 0.55;
}

:is(section) :is(h1,h2,p,img):only-child {
	position: relative;
	z-index: 3;
	margin-bottom: min(4.266666666666667vw,16px);
}

section:last-child {
	margin-bottom: min(6.4vw,24px);
}

:is(section) :is(h1,h2,p,img,ul) {
	position: relative;
	z-index: 3;
	margin-bottom: min(4.266666666666667vw,16px);
}

:is(section) :is(h3) {
	margin-bottom: min(2.1333333333333333vw,8px);
}

:is(section) :is(.Button_1,.Button_2) {
	margin-bottom: min(6.4vw,24px);
}

:is(section) :is(h1,h2,h3,p,ul,button):last-child {
	position: relative;
	z-index: 3;
	margin-bottom: 0;
}

:is(.Box) img:has(+p) {
	margin-bottom: min(0.26666666666666666vw,1px);
}

:is(.Box) img+p, :is(.Box) a+p {
	margin-inline: auto;
	max-inline-size: max-content;
	text-align: start;
}


/*背景をつけないセクション*/
.No_Background {
	clear: both;
	overflow: hidden;
	position: relative;
	background: none;
	padding: 0;
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	margin-bottom: min(8.533333333333333vw,32px);
}

.No_Background:after {
	content: none;
	background: hsla(0,0%,0%,0);
	background: none!important;
}

.No_Background:last-child {
	margin-bottom: min(6.4vw,24px);
}


/* コミュニティバナー */
.Community_1 {
	z-index: 10;
	clear: both;
	overflow: hidden;
	position: relative;
	background: none;
	margin: 0 auto;
	padding: 0;
}

.Community_1:after {
	background: hsla(0,0%,0%,0);
}

:is(.Community_1,.Community_2)  :is(a) {
	font-weight: 700;
	color: hsla(196,80%,61%,1);
	display: contents;
	position: relative;
	z-index: 100;
	height: 0;
}


/* フッター共通設計 */
footer {
	width: min(100vw,600px);
	position: relative;
	margin: 0 auto;
	padding-top: min(10.666666666666668vw,40px); 
	padding-bottom: min(26.73333333333333vw,100.25px);
	padding-right: min(6.4vw,24px);
	padding-left: min(6.4vw,24px);
}


/*
footer:after {
	position: absolute;
	content: "";
	background: hsl(0,0%,85%);
	height: min(1px,0.26666666666666666vw);
	width: 100%;
	left: 0%;
	bottom: min(30.133333333333333vw,113px);
}
*/

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

ul.Social-Icons li {
	display: inline;
	margin-bottom: min(6.4vw,24px);
	list-style: none;
	text-decoration: none;
}

ul.Social-Icons li:after {
	content: "";
	display: none;
}

ul.Social-Icons li:before {
	content: "";
	display: none;
}

ul.Social-Icons a {
	background: none;
}

.Icon {
	background: none;
	vertical-align: middle;
}

.Icon img{
	width: min(6.4vw,24px);
	border-radius: 0;
}

li.Icon {
	margin-right: min(4.266666666666667vw,16px);
	margin-left: min(4.266666666666667vw,16px);
}

.Copyright {
	color: var(--secondary-text);
	text-align: center;
}


/*────────────────────────────────────────────────*/


/* 共通タグの設計 */
h1 {
	width: 100%;
	z-index: 3;
	text-align: start;
	position: relative;
	margin: 0 auto;
	font-weight: bold;
	font-size: min(6.4vw,24px);
	letter-spacing: -0.01em;
	color: var(--primary-text);
	line-height: min(9.6vw,36px);
}

h2 {
	width: 100%;
	z-index: 3;
	text-align: start;
	position: relative;
	font-size: min(4.8vw,18px);
	font-weight: bold;
	letter-spacing: -0.01em;
	color: var(--primary-text);
	line-height: min(8.533333333333333vw,32px);
}

h3 {
	width: 100%;
	z-index: 3;
	text-align: start;
	position: relative;
	margin: 0 auto;
	font-weight: bold;
	font-size: min(4.266666666666667vw,16px);
	letter-spacing: -0.01em;
	color: var(--primary-text);
	line-height: min(8vw,30px);
}

p {
	z-index: 3;
	text-align: start;
	margin: 0 auto;
	font-size: min(3.733333333333334vw,14px);
	font-weight: 400;
	/*letter-spacing: 0.005em;*/
	line-height: min(7.466666666666668vw,28px);
	color: var(--secondary-text);
}

input [type=radio] {
	display: none;
}

ul {
	z-index: 3;
	padding: 0;
	display: table;
}

li {
	z-index: 3;
	position: relative;
	display: table-row;
	text-align: start;
	font-size : min(3.733333333333334vw,14px);
	color: var(--secondary-text);
	padding-left: 0;
	list-style: none;
	text-decoration: none;
}

li:before {
	content: "・";
	display: table-cell;
}

li:after {
	display: block;
	content: "";
}

a {	
	position: relative;
	z-index: 10;
	display: block;
	text-align: center;
	margin: 0;
	background-position: 100% 50%;
	text-decoration: none;
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	overflow: hidden;
	transition: 0.4s ease 0s;
}

a:hover {
	z-index: 100;
	text-decoration: none;
	filter: brightness(0.9);
	background-position: 1% 50%;
	background-size: 200% auto;
	transition: 0.4s ease 0s;
	color: var(--primary-button-text);
}

a:active {
	z-index: 100;
	text-decoration: none;
	filter: brightness(1.1);
}

	a:has(img):hover {
		filter: none!important;
	}

/*pタグ内でaタグを使用するとき*/
:is(p,li) :is(a) {
	display: contents;
	position: relative;
	z-index: 100;
	height: 0;
} 

/* トップへ戻るボタン */
.Top_Scroll {
	position: fixed;
	bottom: 6.51042vw;
	right: 3.90625vw;
	width: min(13.333333333333334vw,50px);
	height: min(13.333333333333334vw,50px);
	font-weight: bold;
	padding: 0.7em;
	text-align: center;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: rotate(-180deg);
}

.Active {
	z-index: 500;
	content: '';
	background: hsla(0,0%,100%,1);
	width: min(13.333333333333334vw,50px);
	height: min(13.333333333333334vw,50px);
	border-radius: min(2.666666666666667vw,10px);
	filter: drop-shadow(0px 0px 1px rgba(48, 49, 51, 0.05)) drop-shadow(0px 2px 4px rgba(48, 49, 51, 0.3));
	position: fixed;
	/* 表示する */
	opacity: 1;
	visibility: visible;
	transition: 0.4s ease 0s;
	transform: rotate(0deg);
}

.Active:before {
	z-index: 150;
	content:  '';
	width: min(5.333333333333334vw,20px);
	height: min(5.333333333333334vw,20px);
	display: block;
	border-top: solid 4px hsl(0,0%,35%);
	border-right: solid 4px hsl(0,0%,35%);
	transform: rotate(-45deg);
	position: absolute;
	border-top-right-radius: 2px;
	border-top-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 2px;
	bottom: min(2.666666666666667vw,10px);
	left: 0;
	right: 0;
	margin: auto;
	transition: 0.4s ease 0s;
}

button {
	position: relative;
	z-index: 3;
	display: block;
}

img {
	z-index: 3;
	width: 100%;
	border-radius: min(2.1333333333333333vw,8px);
}


video {
	position: relative;
	z-index: 3;
}

/*────────────────────────────────────────────────*/


/* コンポーネント設計 */


/*タブ切り替えの設計*/

/*タブ切り替え全体のスタイル*/
.Tab {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	min-width: min(91.46666666666667vw,343px);
	margin: 0 auto;
}

/*タブのスタイル*/
.Tab_Item {
	white-space: nowrap;
	min-width: min(45.733333333333334vw,171.5px);
	z-index: 4;
	position: relative;
 	width: calc(100% / 2);
 	background: none;
 	line-height: min(8vw,30px);
 	font-size: min(4.266666666666667vw,16px);
 	text-align: center;
 	color: var(--secondary-text);
 	display: flex;
	justify-content: center;
	align-items: center;
 	float: left;
 	font-weight: normal;
	transition: all 0.2s ease;
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	margin-bottom: min(8.533333333333333vw,32px);
}

.Tab_Item:before {
	position: absolute;
	content: "";
	background: var(--primary-color);
	filter: brightness(1.3);
	width: 100%;
	height: min(1.0666666666666667vw,4px);
	bottom: min(2.1333333333333333vw,-8px);
	left: 0;
}

.Tab_Item:first-of-type::before {
	border-bottom-left-radius: min(2.666666666666667vw,10px);
	border-top-left-radius: min(2.666666666666667vw,10px);
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.Tab_Item:last-of-type::before {
	border-bottom-right-radius: min(2.666666666666667vw,10px);
	border-top-right-radius: min(2.666666666666667vw,10px);
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.Tab_Item:hover {
	opacity: 0.75;
}

/* タブが1つだけの時 */
.Tab_Item:only-of-type {
	pointer-events: none;
}

.Tab_Item:only-of-type::before {
	border-bottom-right-radius: min(2.666666666666667vw,10px);
	border-top-right-radius: min(2.666666666666667vw,10px);
	border-bottom-left-radius: min(2.666666666666667vw,10px);
	border-top-left-radius: min(2.666666666666667vw,10px);
}

/* タブが3つ以上の時 */
.Tab:has(> :nth-of-type(4)) .Tab_Item {
	min-width: 20%;
	width: calc(100% / 4);
}

/*ラジオボタンを全て消す*/
input[name="Tab_Item"] {
  display: none;
}

input[name="Anchor_Item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.Tab_Container {
  display: none;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#Tab1:checked ~ #Container_1,
#Tab2:checked ~ #Container_2,
#Tab3:checked ~ #Container_3,
#Tab4:checked ~ #Container_4,
#Tab5:checked ~ #Container_5,
#Tab6:checked ~ #Container_6,
#Tab7:checked ~ #Container_7,
#Tab8:checked ~ #Container_8,
#Tab9:checked ~ #Container_9,
#Tab10:checked ~ #Container_10{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.Tab input:checked + .Tab_Item {
 	color: var(--primary-text);
	font-weight: bold;
}

.Tab input:checked + .Tab_Item:before {
		filter: brightness(1);
}

/*────────────────────────────────────────────────*/
/*スライダー*/
.Slider {
	z-index: 100;
	position: relative;
	display: block;
}

.Slider_Box {
	position: relative;
    margin: 0 auto;
	margin-bottom: min(4.266666666666667vw,16px);
    white-space: nowrap;
    overflow: hidden;
    z-index: 100;
    overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-track {
	display: none;
	background: hsla(0,0%,0%,0);
}

.Slider_Item {
	display: inline-block;
	vertical-align: top;
	width: 70%;
	max-width: min(82.66666666666667vw,310px);
	margin-right: min(4.266666666666667vw,16px);
}

.Slider_Item img {
	margin-bottom: min(1.0666666666666667vw,4px);
}

:is(.Slider_Item) :is(h3,p) {
	text-align: center;
}

.Slide_Image:last-child {
	margin-right: 0;
}


/*────────────────────────────────────────────────*/
/*アンカーボタン*/

.Anchor_Box input:checked + .Anchor_Item:before {
		filter: brightness(1);
}

* {
	box-sizing: border-box;
}
 
.Anchor {
	z-index: 4;
	position: relative;
	width: 100%;
	text-align: start;
	overflow: hidden;
}
 
.Anchor_Box {
	margin: 0 auto;
	width: 100%;
	z-index: 100;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: stretch;
	white-space: nowrap;
    overflow: hidden;
    z-index: 100;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: min(2.1333333333333333vw,8px);
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}

/* 選択されていないスライダー */
.Anchor_Item {
	z-index: 100;
	flex-direction: column;
	min-height: min(20vw,65px);
	padding: min(2.1333333333333333vw,8px);
    scroll-snap-align: start;
    flex-shrink: 1;
    width: 20%;
    margin-right: min(2.1333333333333333vw,8px);
    border-radius: min(2.666666666666667vw,10px);
    background: var(--primary-color);
	text-align: center;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
	justify-content: center;
    align-items: center;
    font-size: min(3.733333333333334vw,14px);
	font-weight: bold;
	color: var(--primary-color-text);
    line-height: min(8vw,30px);
	transition: all 0.2s ease;
}

 li.Anchor_Item:before {
	display: none;
}

li.Anchor_Item a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 2つの場合 */
.Anchor_Box .Anchor_Item:first-child:nth-last-child(2),
.Anchor_Item:first-child:nth-last-child(2) ~ .Anchor_Item {
    width: calc(50% - 8px);
}

/* 3つの場合 */
.Anchor_Item:first-child:nth-last-child(3),
.Anchor_Item:first-child:nth-last-child(3) ~ .Anchor_Item {
    width: calc(35% - 10px);
}

/* 4つの場合 */
.Anchor_Item:first-child:nth-last-child(4),
.Anchor_Item:first-child:nth-last-child(4) ~ .Anchor_Item {
    width: calc(25% - 2px);
}

.Anchor_Item:last-child {
	margin-right: 0; 
}

/* 縦並び表示 */
.Anchor_Box2 {
    margin: 0 auto;
    width: 100%;
    z-index: 5;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: min(2.1333333333333333vw,8px);
}

.Anchor_Item2 {
    flex-direction: column;
    padding: min(2.1333333333333333vw,8px);
    scroll-snap-align: start;
    flex-shrink: 1;
    width: 47%;
    border-radius: min(2.666666666666667vw,10px);
    background: var(--primary-color);
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(3.733333333333334vw,14px);
    font-weight: bold;
    color: var(--primary-color-text);
    line-height: min(8vw,30px);
    transition: all 0.2s ease;
}


/* 選択されているスライダーのスタイルを変える 
.Anchor_Box input:checked + .Anchor_Item {
 	color: var(--primary-color-text);
	font-weight: bold;
    scroll-snap-align: start;
    flex-shrink: 1;
    background: var(--primary-color);
}

.Anchor_Box input:checked + .Anchor_Item > a:hover {
	filter: brightness(0.9);
 	color: var(--primary-color-text);
	font-weight: bold;
    scroll-snap-align: start;
    flex-shrink: 1;
    background: var(--primary-color);
}

.Anchor_Box input:checked + .Anchor_Item > a:active {
 	color: var(--primary-color-text);
	font-weight: bold;
    scroll-snap-align: start;
    flex-shrink: 1;
    background: var(--primary-color);
}

.Anchor_Box::-webkit-scrollbar {
	width: auto;
	height: min(1.0666666666666667vw,4px);
	bottom: min(1.0666666666666667vw,4px);
}
.Anchor_Box::-webkit-scrollbar-thumb {
	position: relative;
	background: hsla(0,0%,35%,0.3);
	border-radius: min(2.666666666666667vw,10px);
}

.Anchor_Box::-webkit-scrollbar-track {
  background: transparent;
}
*/

/*
.Anchor_Box > div {
	padding: min(1.0666666666666667vw,4px);
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 20%;
    max-width: min(16vw,60px);
    height: 100%;
    margin-right: min(1.0666666666666667vw,4px);
    border-radius: min(2.666666666666667vw,10px);
    background: var(--primary-color);
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(3.733333333333334vw,14px);
    line-height: min(8vw,30px);
}
.Anchor_Box > div:target {
	transform: scale(0.8);
}
*/

.Anchor > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
 
/* Don't need button navigation */
@supports (scroll-snap-type) {
  .Anchor > a {
    display: none;
  }
}


/*────────────────────────────────────────────────*/


/* ボタンの共通設計 */
.Button_1, .Button_2 {
	width: fit-content;
	max-height: min(11.733333333333333vw,44px);
	margin: 0 auto;
	display: flex;
    justify-content: center;
	align-items: center;
	color: var(--primary-button-text);
	background: var(--primary-button-background);
	background-position: 1% 50%;
	background-size: 200% auto;
	text-align: center;
	font-weight: bold;
	font-size: min(3.733333333333334vw,14px);
	padding-top: min(2.1333333333333333vw,8px);
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	padding-bottom: min(2.1333333333333333vw,8px);
	margin-bottom: min(8.533333333333333vw,32px);
	transition: background-color 0.4s ease 0s;
	border-radius: min(26.666666666666668vw,100px);
	border: none;
}

.Button_1, .Button_2:hover {
	transition: 0.4s ease 0s;
	background-position: 100% 50%;
}

:is(.Button_1,.Button_2) a {
	margin: 0;
	text-align: start;
}

:is(.Button_1,.Button_2) :is(img) {
	margin: 0;
	width: min(5.333333333333334vw,20px);
	border-radius: 0;
	margin-right: min(1.0666666666666667vw,4px);
	margin-left: min(1.0666666666666667vw,4px);
	vertical-align: sub;
}

.Button_2 {
	color: var(--secondary-button-text);
	background: var(--secondary-button-background);
}


.Content_Description .Button_1 {
	margin-top: min(2.1333333333333333vw,8px);
	margin-bottom: min(2.1333333333333333vw,8px);
}

/* ボタンのサイズ違いだが使わなそうなので一旦保留
.Button_M {
	width: auto;
	margin: 0 auto;
	display: flex;
    justify-content: center;
	align-items: center;
	color: var(--primary-color-text);
	background: var(--primary-color);
	text-align: center;
	font-weight: bold;
	font-size: min(3.733333333333334vw,14px);
	padding-top: min(2.666666666666667vw,10px);
	padding-right: min(4.8vw,18px);
	padding-left: min(4.8vw,18px);
	padding-bottom: min(2.666666666666667vw,10px);
	margin-bottom: min(8.533333333333333vw,32px);
	transition: background-color 0.4s ease 0s;
	border-radius: min(26.666666666666668vw,100px);
}

	.Button_M,.Button_S:hover {
		text-decoration: none;
		filter: brightness(0.9);
		transition: background-color 0.4s ease 0s;
	}
	.Button_M,.Button_S:active {
		text-decoration: none;
		filter: brightness(1.1);
	}
*/

/* 表組(Tableタグ) */




/*────────────────────────────────────────────────*/


/* 大見出し用装飾 */
.Section_Title {
	width: 100%;
	position: relative;
	padding-left: min(3.2vw,12px);
	background: none!Important;
}

.Section_Title:before {
	position: absolute;
	content: "";
	background: var(--primary-color);
	border-radius: min(26.666666666666668vw,100px);
	height: 100%;
	width: min(1.0666666666666667vw,4px);
	left: 0;
	bottom: 0;
}

/* 中見出し用装飾 */
.Section_Sub {
	position: relative;
	margin-bottom: min(4.266666666666667,16px);
	background: none!Important;
}

.Section_Sub:before {
	position: absolute;
	content: "";
	background: var(--primary-color);
	border-radius: min(26.666666666666668vw,100px);
	height: min(1.0666666666666667vw,4px);
	width: min(10.666666666666668vw,40px);
	left: 0;
	bottom: min(-0.6666666666666667vw,-4px);
}

/*著者用装飾*/
.Author {
	max-inline-size: inherit;
	font-size: min(3.2vw,12px);
	font-weight: bold;
	line-height: min(5.333333333333334vw,20px);
	margin-top: min(2.1333333333333333vw,8px);
	background: none!Important;
}

:is(.Author) :is(img) {
	width: min(4.266666666666667vw,16px);
	vertical-align: sub;
	margin-bottom: 0;
}

:is(.Author) :is(p) {
	text-align: start;
}

/*見出し+画像*/
.Headline {
	max-inline-size: inherit;
	font-weight: bold;
	line-height: min(5.333333333333334vw,20px);
	margin-top: min(2.1333333333333333vw,8px);
	background: none!Important;
}

:is(.Headline) :is(img) {
	width: min(5.33333333333333vw,20px);
	vertical-align: sub;
	margin-bottom: 0!important;
}

:is(.Headline) :is(p) {
	text-align: start;
}

/*────────────────────────────────────────────────*/

.Custom {
	position: relative;
	padding-top: min(6.4vw,24px);
	padding-bottom: min(6.4vw,24px);
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	margin-bottom: min(8.533333333333333vw,32px);
	border-radius: min(2.666666666666667vw,10px);
	border: none;
}

.Custom:after {
	z-index: 2;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--background-primary);
	filter: drop-shadow(0px 0px 1px rgba(48, 49, 51, 0.05)) drop-shadow(0px 4px 8px rgba(48, 49, 51, 0.08));
	border-radius: min(2.666666666666667vw,10px);
	mix-blend-mode: normal;
}

/* 注意事項などその他部分の設計 */
#Note {
	position: relative;
	z-index: 4;
	display: block;
	padding-top: min(6.4vw,24px);
	padding-right: min(4.266666666666667vw,16px);
	padding-bottom: min(6.4vw,24px);
	padding-left: min(4.266666666666667vw,16px);
	border-radius: min(2.1333333333333333vw,8px);
}

#Note:after {
	z-index: 2;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--background-secondary);
	filter: drop-shadow(0px 0px 1px rgba(48, 49, 51, 0.05)) drop-shadow(0px 4px 8px rgba(48, 49, 51, 0.08));
	border-radius: min(2.666666666666667vw,10px);
	mix-blend-mode: normal;
}

:is(#Note) :is(h1,h2,p) {
	position: relative;
	z-index: 3;
	margin-bottom: min(6.4vw,24px);
}

:is(#Note) :is(p):last-of-type {
	margin-bottom: 0;
}

#Terms {
	position: relative;
	z-index: 4;
	display: block;
	padding-top: min(6.4vw,24px);
	padding-right: min(4.266666666666667vw,16px);
	padding-bottom: min(6.4vw,24px);
	padding-left: min(4.266666666666667vw,16px);
	border-radius: min(2.1333333333333333vw,8px);
}

#Terms:after {
	z-index: 2;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: hsl(100,100%,100%,1);
	filter: drop-shadow(0px 0px 1px rgba(48, 49, 51, 0.05)) drop-shadow(0px 4px 8px rgba(48, 49, 51, 0.05));
	border-radius: min(2.666666666666667vw,10px);
	mix-blend-mode: normal;
}

/*────────────────────────────────────────────────*/

/*section装飾用*/
:is(.Index) :is(h2,h3,p) {
	text-align: center;
}

/*────────────────────────────────────────────────*/

/*フレックス適用*/
.Box {
	display: flex;
	width: 100%;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: min(4.266666666666667vw,16px);
}

:is(.Box) :is(h1,h2,h3) {
	margin-left: 0;
	margin-bottom: min(4.266666666666667vw,16px);
}

:is(.Box) :is(img) {
	flex-wrap: nowrap;
}

.Box:last-child {
	margin-bottom: 0;
}

.Box:only-child {
	margin-bottom: 0;
}


/*イメージと注釈*/
/* 画像1枚+テキスト */
.Box_Single {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: min(6.4vw,24px);
}

.Box_Single:last-child {
	margin-bottom: 0;
}

.Box_Single p {
	margin-inline: auto;
	max-inline-size: max-content;
}

/* 画像2枚+テキスト */
.Box_Dual {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: min(6.4vw,24px);
}

.Box_Dual:last-child {
	margin-bottom: 0;
}

.Box_Dual img {
	width: calc(50% - min(2.1333333333333333vw,8px));
	margin-bottom: min(2.1333333333333333vw,8px);
}

.Box_Dual p {
	margin-inline: auto;
	max-inline-size: max-content;
}


/* [画像+テキスト]を複数並べる */
.Box_Cell {
	width: calc(45% - min(2.1333333333333333vw,8px));
	margin-bottom: min(4.266666666666667vw,16px);
	text-align: center;
}

.Box_Cell p {
	margin-inline: auto;
	max-inline-size: max-content;
}

/*
.Box_Cell:nth-child(odd) {
	margin-right:  min(4.266666666666667vw,16px);
}

.Box_Cell:nth-child(even), .Box_Cell:last-child {
	margin-right: 0;
}
*/

:is(.Box_Cell) :is(h3,p,img) {
	margin-bottom: min(0.26666666666666666vw,1px);
}

.Box a > img {
	width: 100%;
	margin-bottom: min(0.26666666666666666vw,1px);
}


/* Box内アイテム装飾 */
:is(.Image_Frame) img{
	border: 1px solid hsla(0,0%,65%,1);
	background: hsla(0,0%,100%,0.2);
}


:is(.Image_Background) img{
	background: hsla(0,0%,100%,0.3);
}

/* 表組 */
table {
	z-index: 3;
	position: relative;
	width: 100%;
	margin: 0 auto;
	table-layout: fixed;
	padding-top: min(4.266666666666667vw,16px);
	padding-right: min(min(5.333333333333334vw,20px));
	padding-left: min(min(5.333333333333334vw,20px));
	padding-bottom: min(4.266666666666667vw,16px);
	margin-bottom: min(4.266666666666667vw,16px);
	border-top-left-radius: min(2.666666666666667vw,10px);
	border-top-right-radius: min(2.666666666666667vw,10px);
}

table:after {
	z-index: -1;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding-top: min(4.266666666666667vw,16px);
	padding-right: min(5.333333333333334vw,20px);
	padding-left: min(5.333333333333334vw,20px);
	padding-bottom: min(4.266666666666667vw,16px);
	background-color: var(--list-background);
	border-top-left-radius: min(2.666666666666667vw,10px);
	border-top-right-radius: min(2.666666666666667vw,10px);
	border: solid 1px var(--border);
	mix-blend-mode: overlay;
}

table tr {
	z-index: 2;
	position: relative;
}

table tr:last-of-type {
	border-bottom: 0;
}

table th {
	z-index: 1;
	position: relative;
	border-bottom: solid 1px var(--border);
}

table th:first-child {
	border-right: solid 1px var(--border);
}

table th:first-child:after {
	border-top-left-radius: min(2.666666666666667vw,10px);
}

table th:last-child:after {
	border-top-right-radius: min(2.666666666666667vw,10px);
}

table th:after {
	z-index: -1;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--background-primary);
	mix-blend-mode: overlay;
	opacity: 0.7;
}

table td {
	border-bottom: dashed 1px var(--border);
}

table td:first-child {
	color: var(--secondary-color-text);
	border-right: solid 1px var(--border);
}

table small {
	display: block;
	font-size: 75%;
	opacity: 0.9;
}

:is(table) :is(td,th) {
	color: var(--secondary-text);
	vertical-align: middle;
	align-items: center;
	padding-top: min(2.1333333333333333vw,8px);
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	padding-bottom: min(2.1333333333333333vw,8px);
}

:is(table) :is(td,th):empty {
	width: 0;
}

.Caption {
	font-size: 80%;
    color: var(--primary-list-text);
    font-weight: 700;
	border: none;
}

td:has(.Caption) {
	padding-bottom: 0;
}

/* 情報 */
.List_Box {
	position: relative;
	z-index: 4;
	margin-bottom: min(6.4vw,24px);
}

.List_Box:last-child {
	margin-bottom: 0;
}

.List_Item {
	position: relative;
	z-index: 4;
	padding-top: min(1.0666666666666667vw,4px);
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	padding-bottom: min(1.0666666666666667vw,4px);
	margin-bottom: min(4.266666666666667vw,16px);
	border-radius: min(2.1333333333333333vw,8px);
	border: 1px solid var(--border);
	background: var(--list-background);
}

.List_Item:last-child {
	margin-bottom: 0;
}

.List_Item:only-child {
	margin-bottom: 0;
}

.List_Title {
	font-size: 80%;
	color: var(--primary-list-text);
	font-weight: 700;
	margin-bottom: min(1.0666666666666667vw,4px)!important;
	max-inline-size: inherit;
}

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

.List_Text > p{
	margin: 0;
	min-width: min(17.333333333333336vw,65px);
	color: var(--secondary-list-text);
	font-size: min(4.266666666666667vw,16px);
	font-weight: 700;
	line-height: min(8vw,30px);
}


/*────────────────────────────────────────────────*/
/* モーダル関連のCSS */
/*全て共通：hideエリアをはじめは非表示*/
.Hide_Area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:var(--primary-color-text);	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:var(--primary-color);
}

.Modal_Text, .Modal_Image li:before {
	content: "";
}

.Modal_Image img {
	width: 100%;
	margin-right: min(4.266666666666667vw,16px);
}

/*twitter埋め込み*/
.twitter-tweet, .twitter-tweet-rendered, .twitter-timeline {
	position: relative;
	z-index: 3;
}

/*────────────────────────────────────────────────*/
/* レスポンシブで可変が必要な場合 */

/* PCサイズ */
@media screen and (min-width:600px) {
	wrapper {
		width: calc(600px - 24px);
		margin: 0 auto;
	}
	
	.Anchor_Box {
		justify-content: center;
		
	}
	
	.Anchor_Box > div {
		margin-right: min(4.266666666666667vw,16px);
	}
	
	.Anchor_Item {
		width: 15%;
	}

	:is(.Community_1, .Community_2) {
		max-width: min(66.66666666666666vw,400px);
	}
	
	/* アイコン+注釈 */
	.Content {
		position: relative;
		z-index: 3;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: nowrap;
		padding: min(2.1333333333333333vw,8px);
		margin-bottom: min(4.266666666666667vw,16px);
		border-radius: min(2.666666666666667vw,10px);
	}

	.Content:after {
		position: absolute;
		z-index: 2;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: min(2.1333333333333333vw,8px);
		background: var(--background-secondary);
		border-radius: min(2.666666666666667vw,10px);
		box-shadow: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 8px 16px rgba(48, 49, 51, 0.08);
	}

	.Content_Description {
	max-height: min(42.24vw,158.4pc);
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    width: 65%;
    overflow: auto;
	}

	:is(.Content_Description) :is(h3,p,button) {
		width: 100%;
		text-align: start;
		margin: 0;
		margin-bottom: min(2.1333333333333333vw,8px);
	}

	/*:is(.Content_Description) :is(h3,p,button):last-child {
		margin-bottom: 0;
	}*/

	.Content_Image {
		position: relative;
		z-index: 3;
		width: 30%;
		top: 0;
		left: 0;
		margin-right: min(4.266666666666667vw,16px);
		border-radius: min(2.666666666666667vw,10px);
	}

	.Content_Image img {
		width: 100%;
		border-radius: min(2.666666666666667vw,10px);
		margin: 0!important;
	}
	
	.modaal-wrapper {

		transform: translateY(0%);
	}

	.modaal-inner-wrapper {
		padding: 0;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.modaal-container {
		display: contents;
		position: relative;
		background: none!important;
		margin: 0 auto;
		white-space: nowrap;
		overflow: hidden;
		z-index: 100;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: min(2.666666666666667vw,10px);
		box-shadow: 0!important;
	}

	.modaal-content-container {
		width: 90%;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		top: 25%;
		padding: 0;
	}

    .modaal-content-container:has(> :nth-child(-n+5):last-child) img {
        width: 30%;
    }

	.modaal-content-container img {
		width: 15%;
		margin: min(3.2vw,12px);
		margin-bottom: min(6.4vw,24px);
		background: none;
		border-radius: min(2.666666666666667vw,10px);
	}

	/* 閉じるボタン */
	.modaal-close {
    background: #afb7bc!important;
	}

}



/* SPサイズ */	
@media screen and (max-width:599px) {
	.Community_1,.Community_2 {
		margin-right: 0;
		margin-left: 0;
	}
	
	.Content {
		position: relative;
		z-index: 3;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		padding: min(2.1333333333333333vw,8px);
		margin-bottom: min(4.266666666666667vw,16px);
		border-radius: min(2.666666666666667vw,10px);
	}

	.Content:after {
		position: absolute;
		z-index: 2;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: min(2.1333333333333333vw,8px);
		background: var(--background-secondary);
		border-radius: min(2.666666666666667vw,10px);
		box-shadow: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 8px 16px rgba(48, 49, 51, 0.08);
	}
	
	.Content_Description {
		position: relative;
		z-index: 3;
		width: 100%;
	}

	:is(.Content_Description) :is(h3,p) {
		width: 100%;
		margin-inline: auto;
		max-inline-size: max-content;
		margin: 0 auto;
		margin-bottom: min(2.1333333333333333vw,8px);
	}

	:is(.Content_Description) :is(button) {
		width: 100%;
		justify-content: center;
	}


	/*:is(.Content_Description) :is(h3,p,button):last-child {
		margin-bottom: 0;
	}*/

	.Content_Image {
		position: relative;
		z-index: 3;
		width: 100%;
		top: 0;
		left: 0;
		margin-bottom: min(4.266666666666667vw,16px);
		border-radius: min(2.666666666666667vw,10px);
	}

	.Content_Image img {
		width: 100%;
		border-radius: min(2.666666666666667vw,10px);
		margin: 0!important;
	}

	.modaal-wrapper {
		height: 100%;
		z-index: 1000!important;
	}

	.modaal-inner-wrapper {
		padding: 0;
	}

	.modaal-container {
		display: contents;
		position: relative;
		background: none!important;
		margin: 0 auto;
		white-space: nowrap;
		overflow: hidden;
		z-index: 100;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: min(2.666666666666667vw,10px);
		box-shadow: 0!important;
	}
	
	.modaal-content-container {
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 0;
		transform: translate(-50%,-50%);
		max-width: min(90.66666666666666vw,340px);
		display: flex;
		justify-content: flex-start;
		align-content: space-around;
	}
	
	.modaal-content-container img{
		width: 100%;
		margin-right: min(4.266666666666667vw,16px);
		border-radius: min(2.666666666666667vw,10px);
	}
	
	/* 閉じるボタン */
	.modaal-close {
    background: #afb7bc!important;
    right: 3.5%;
    top: 25.5%;
	}
}

@media screen and (max-width:375px) {
	/*.Tab {
		margin-left: calc(50% - min(91.46666666666667vw,343px)/2);
	}*/
}