:root {

	/**** 基本要素 ****/
	/* 下部マージン */
  --margin_bottom_s: 30px;
  --margin_bottom_ml: 40px;

	/**** ヘッダー ****/
	/* 上部マージン */
  --margin_top_h_s: 45px;/* ヘッダーの上部マージン */
  --margin_top_h_ml: 50px;

  /* 基本カラー */
	--color-primary-navy: #16284f;        /* メインのダークブルー */ 
	--color-accent-gold: #ad872a;         /* アクセントのゴールド */
	--color-accent-gold-light: #cdbe73;   /* アクセントのイエロー寄り */ 
	--color-beige: #d6cdb9;               /* 落ち着いたベージュ */
	--color-white: #f4f2ed;               /* 背景向けのオフホワイト */
	--color-brown-dark: #492d1c;          /* 深みのあるブラウン */
	--color-black: #333333;          /* 深みのあるブラウン */
	--color-gray:#B0ACA4; /* 薄いグレー */
	--color-red: #a94442;
	--color-green: #3c763d; /* 深みと安心感のあるグリーン */
	--color-pastel-beige: #ede8da;         /* 背景向けのライトベージュ */
	--color-pastel-red: #f6dddd;      /* 柔らかなローズ系レッド */
	--color-pastel-blue: #d1d7dd;     /* グレイッシュなベビーブルー */
	--color-pastel-green: #e5fff3;    /* ミントがかった淡いグリーン */
	--color-pastel-yellow: #f3e6b1;   /* くすみ感のあるイエロー・ベージュ寄り */  
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ common
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/********************************************************
■ ユニバーサルセレクタ・要素セレクタ
 （例：*, html）
********************************************************/
/*--------------------------------------------------------
■ ブラウザが勝手につけるマージンを削除
--------------------------------------------------------*/

*,*:before, *:after{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
  	-webkit-tap-highlight-color: transparent;/* モバイルブラウザのタップ時の青色ハイライトを消す */	
}
/*--------------------------------------------------------
■ body
--------------------------------------------------------*/
body{
	background-color: var(--color-pastel-beige);
	overflow-x:hidden;
}
/*--------------------------------------------------------
■ html
--------------------------------------------------------*/

html{
	font-size: 15px;
	font-size: clamp(15px, 1.2vw, 17px);
	color: var(--color-black);
	letter-spacing: 0.05em;
	line-height: 1.7;
	/* %で指定すると子や孫にも本要素で「計算後の実値」が継承されてしまうため、単位無しで指定 */
	/* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; */
	touch-action: manipulation; /*ダブルタップによるズームを無効化*/
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	overflow-x:hidden;
}
*{
    font-family: inherit;/* フォントを継承（button等で勝手に他のフォントになるのを防ぐ */
}
/*--------------------------------------------------------
■ a
--------------------------------------------------------*/

a{
	color:var(--color-accent-gold);
	text-decoration:none;
	cursor: pointer;
}

/*--------------------------------------------------------
■ アイコン
--------------------------------------------------------*/

i{
	margin-right: 0.4em;/* アイコンと右の文字の間にマージン */
}

i.sentence{
	margin-left: 0.4em;/* 文中なのでアイコンと左の文字の間にもマージン */
}

/********************************************************
■ クラス名のみ
 （例：.number）
********************************************************/
/*--------------------------------------------------------
■ 強調
--------------------------------------------------------*/

.number{
	font-family: 'Quicksand', sans-serif;
}

strong{
	/* border-bottom: solid 1px var(--color-accent-gold); */
}
strong.red{
	border-bottom: none;
	color:var(--color-red);
	font-size:1.1em;
}
.italic{
	font-style: italic;
}
.bold{
	font-weight: bold;
}
/* 情報公開まで非表示の要素につける */
.release_soon{
	display: none !important;
}
/*--------------------------------------------------------
■ 最後要素にだけ使いたいマージン調整
--------------------------------------------------------*/

.last_margin_bottom{
	margin-bottom: var(--margin_bottom_s) !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */

}
@media only screen and (min-width: 738px){
	.last_margin_bottom{
		margin-bottom: var(--margin_bottom_ml) !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */
	}
}

/*--------------------------------------------------------
■ 文字の寄せ（中央・右）
--------------------------------------------------------*/

.center{
	text-align: center !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */
}
.right{
	text-align: right !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */
}

/*--------------------------------------------------------
■ フォントカラー
--------------------------------------------------------*/
p.red,
span.red,
i.red{
	color:var(--color-red);
}
p.gold,
span.gold,
i.gold{
	color:var(--color-accent-gold);
}
p.navy,
span.navy,
i.navy{
	color:var(--color-primary-navy);
}
/*--------------------------------------------------------
■ スモールフォント
--------------------------------------------------------*/
.small_font{
	font-size:13px;
}
/*--------------------------------------------------------
■ SP版で改行させる
--------------------------------------------------------*/
br.sp_new_line {
	display:inline;
}
@media screen and (min-width: 738px){
	br.sp_new_line {
		display:none;
	}
}
/*--------------------------------------------------------
■ SP版でのみ表示／PC版でのみ表示
--------------------------------------------------------*/
/* スマホでのみ表示 */
.only_sp {
    display: block;
}
@media only screen and (min-width: 738px) {
    .only_sp {
        display: none !important;
    }
}

/* タブレット・PCでのみ表示 */
.only_pc {
    display: none;
}
@media only screen and (min-width: 738px) {
    .only_pc {
        display: block;
    }
}

/* デスクトップでのみ表示 */
.only_desktop {
    display: none;
}
@media only screen and (min-width: 1117px) {
    .only_desktop {
        display: block;
    }
}
/* 1117px未満のみ表示 */
.only_under_desktop {
    display: block;
}
@media only screen and (min-width: 1117px) {
    .only_under_desktop {
        display: none !important;
    }
}
/*--------------------------------------------------------
■ 単語の途中でも無理やり改行させる
--------------------------------------------------------*/
.break_all {
	word-break: break-all;
}
/*--------------------------------------------------------
■ matelializeより
--------------------------------------------------------*/

.clearfix{
	clear:both;
}

.float_right{
	float: right !important;
}

/*--------------------------------------------------------
■ メディアクエリ
--------------------------------------------------------*/
.hide_on_small_only{/* smallの時だけ非表示 */
  display: none !important;
}
.hide_on_med_and_down{/*medium以下の時非表示 */
  display: none !important;
}
@media only screen and (min-width: 738px){
	.hide_on_small_only{/* medium以上では表示 */
		display: block !important;
	}
	.hide_on_med_and_up{/* medium以上では非表示 */
   		display: none !important;
  }
}
@media only screen and (min-width: 1117px){
	.hide_on_med_and_down{/* largeでは表示 */
	  display: block !important;
	}
	  .hide_on_large_only{/* largeでは非表示 */
	  display: none !important;
	}
}
/********************************************************
■ 要素セレクタに特定クラスを付与
 （div.left_box）
********************************************************/
/*--------------------------------------------------------
■ left_box,right_box,full_box
--------------------------------------------------------*/

@media only screen and (min-width:1117px){
	div.full_box{/* 開発者用に利用 */
		float:left;
		width:1087px;
	}
	div.left_box{
		float:left;
		width:700px;
	}
	div.right_box{
		float:left;
		width:336px;
		margin-left:51px;
	}
}

/*--------------------------------------------------------
■ container
--------------------------------------------------------*/
div.container{
	margin: 0 5px;
	width: initial;
}
@media only screen and (min-width: 738px){
		div.container{
		margin: 0 10px;
		width: initial;
	}
}
@media only screen and (min-width: 1117px){
	div.container{
		margin: 0 auto;
		width: 1087px;/* 700 + 51 + 336 */
	}
}
/*--------------------------------------------------------
 ■ overflow_hidden
本divで外側から囲むことにより、
「ネガティブマージンによって見た目は保たれるがwidthが100%を超える要素」に横スクロールが出現してしまう不具合を回避できる。
【使用例】
・separate_table
--------------------------------------------------------*/
div.overflow_hidden{
	overflow: hidden;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ nav
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*--------------------------------------------------------
 ■ ヘッダ（PC）
--------------------------------------------------------*/
.header_desktop{
    width:100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding:15px;
    background:var(--color-pastel-beige);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.header_desktop.not_fixed{
    position:absolute;
	box-shadow: none;
}
/* 擬似要素で背景模様を重ねる */
.header_desktop::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../../../view/competition/top/img_bg_pattern.png);
	background-size: 600px 600px; /* ← 指定サイズで繰り返し */
	background-repeat: repeat;
	background-position: center;
	pointer-events: none; /* クリックやスクロールの邪魔をしない */
}
.header_desktop .header_desktop_item{
    display:flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
    max-width: 1117px;
    margin: 0 auto;
}
.header_desktop .header_nav{
    width: 100%;
    position: relative;
	height:61px;
}
.header_desktop .nav_list {
    display: flex;
    justify-content: center;
	align-items: center;
    list-style:none;
    margin-left:0px;
}
.header_desktop .nav_list_item{
    margin-top: 0px;
    text-align:center;
}
.header_desktop .nav_list_link {
    color: #606060;
    padding: 5px;
    margin: 0 10px;
    position: relative;
    text-align:center;
    display: flex;
    align-items: center;
	flex-direction: column
	
}
.header_desktop .nav_txt_jp{
	font-weight: 500;
}
.header_desktop .nav_txt_en{
	color:var(--color-accent-gold);
	font-family: 'Cinzel', serif;
}
.header_desktop .header_logo{
	width:120px;
	margin:0;
}
/* 隙間を空ける */
.header_desktop .spacer {
    width: 170px; 
	flex-shrink: 0; 
}
.header_desktop .logo{
	position:absolute;
	right:50%;
	bottom:-70px;
	width:140px;
	margin-right:-70px;
}
.header_desktop .logo_circle{
	width: 140px;            
	height: 140px;
	border-radius: 50%;
	background-color: var(--color-pastel-beige); 
	display: flex;   
	justify-content: center;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
}
/* サブメニュー対応 */
.header_desktop .nav_list_link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 80%;
	height: 2px;
	background-color: var(--color-accent-gold);
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: right;
}
.header_desktop .nav_list_item:hover a::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* サブメニューアイコン */
.header_desktop .submenu_icon {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--color-accent-gold);
}
/* サブメニュー */
.header_desktop .has_submenu {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	gap: 8px;
    margin: 0 10px;
}
.header_desktop .menu_title{
	display: flex;
	flex-direction: column;
	padding: 5px;
}
.header_desktop .menu_title::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-accent-gold);
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: right;
}
.header_desktop .menu_title:hover::after{
	transform: scaleX(1);
	transform-origin: left;
}
.header_desktop .has_submenu .menu_title::after{
	width: calc(100% - 25px);
}
.header_desktop .submenu {
	display: none;
	position: absolute;
	top: 100%;/* 上のメニューにピッタリくっつける */
	left: 0;
	background: var(--color-pastel-beige);
	padding: 10px;
	z-index: 200;
	min-height:fit-content;
	width:100%;
	white-space: nowrap;
	animation: fadeInUp 0.3s ease forwards;
	opacity: 0;
	list-style: none;
	text-align: left;
  	margin-left: 0;
}

/* アニメーション */
@keyframes fadeInUp {
  to {
    opacity: 1;
  }
}

/* ホバーで表示 */
.header_desktop .has_submenu:hover .submenu,
.header_desktop .has_submenu .submenu:hover {
  display: block;
  
}

/* サブメニュー内リンク */
.header_desktop .submenu_item {
  padding: 5px 0px;
}
.header_desktop .submenu_link{
  color: #333;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}
.header_desktop .submenu_link_icon{
	color: var(--color-accent-gold);
}
/*--------------------------------------------------------
 ■ ヘッダ（SP）
--------------------------------------------------------*/
.header_sp_tb{
	width:100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding:10px;
    background:var(--color-pastel-beige);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.header_sp_tb.not_fixed{
    position:absolute;
	box-shadow: none;
}
/* 擬似要素で背景模様を重ねる */
.header_sp_tb::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../../../view/competition/top/img_bg_pattern.png);
	background-size: 600px 600px; /* ← 指定サイズで繰り返し */
	background-repeat: repeat;
	background-position: center;
	pointer-events: none; /* クリックやスクロールの邪魔をしない */
}
.header_sp_tb .header_sp_tb_item{
    display:flex;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
	position:relative;
	height:30px;
}
.header_sp_tb .logo_circle{
	position:absolute;
	right:50%;
	bottom:-40px;
	width: 80px;            
	height: 80px;
	margin-right:-40px;
	border-radius: 50%; 
	background-color: var(--color-pastel-beige); 
	display: flex;   
	justify-content: center;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
}
.header_sp_tb .header_logo{
	width:70px;
	margin:0px;
}
/*--------------------------------------------------------
 ■ ハンバーガーメニュー
--------------------------------------------------------*/
/* チェックボックス非表示 */
.header_sp_tb .menu_toggle {
  display: none;
}

/* メニューアイコン共通スタイル */
.header_sp_tb .menu_icon {
  font-size: 2rem;
  cursor: pointer;
  z-index: 1100;
  color: #14274d;
  margin-left:auto;
}

/* 開くアイコンと閉じるアイコンを切り替える */
.header_sp_tb .close_icon {
  display: none;
}
.header_sp_tb .menu_toggle:checked + .menu_icon .open_icon {
  display: none;
}
.header_sp_tb .menu_toggle:checked + .menu_icon .close_icon {
  display: inline;
}

.header_sp_tb .menu_icon i{
	margin-right:0px;
}

/* オーバーレイメニューの初期状態 */
.header_sp_tb .overlay_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-pastel-beige);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
  display: flex;
  padding-left:30px;
  padding-right:30px;
  padding-top:70px;
}

/* チェックされたら表示 */
.header_sp_tb .menu_toggle:checked ~ .overlay_menu {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー項目 */
.header_sp_tb .menu_list {
  list-style: none;
  text-align: left;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap:6px;
  width:100%;
}
.header_sp_tb .menu_list_item {
  border-bottom:1px solid var(--color-gray);
  display:block;
  padding-bottom:8px;
}
.header_sp_tb .menu_list_link {
  color: #222222;
  text-decoration: none;
  display:flex;
  flex-direction: column;
}
.header_sp_tb .menu_txt_en{
	color:var(--color-accent-gold);
	font-family: 'Cinzel', serif;
	font-size:0.8rem;
}
/* サブメニューのトグルチェックボックス非表示 */
.header_sp_tb .submenu_toggle {
  display: none;
}

/* サブメニューの見た目初期状態 */
.header_sp_tb .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 0.5rem;
  list-style: none;
}

/* チェックされたら展開 */
.header_sp_tb .submenu_toggle:checked + .submenu_label + .submenu {
  max-height: 500px; /* 展開時の高さは十分大きめにする */
}

/* 親ラベルに対する整形 */
.header_sp_tb .submenu_label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

/* 親ラベルも縦積みに */
.header_sp_tb .submenu_title {
	display: flex;
  	flex-direction: column;
}

/* サブメニューのアイコン */
.header_sp_tb .submenu_icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
  color:var(--color-accent-gold);
}

/* 開いたときに回転 */
.header_sp_tb .submenu_toggle:checked + .submenu_label .submenu_icon {
  transform: rotate(180deg);
}

/* サブメニュー項目の整形 */
.header_sp_tb .submenu_item{
	border:none;
}
.header_sp_tb .submenu_link{
  font-size: 0.9rem;
  color: #333;
  padding: 4px 0;
  display: block;
}
.header_sp_tb .submenu_link i{
  color: var(--color-accent-gold);
  font-size:0.8rem;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ inner
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
section .inner{
	width: 100%;
	width: calc(100% - 20px);
    max-width: 1117px;
    margin-left: auto;
    margin-right: auto;
}
section .inner_lg{
	width: 1000%;
    max-width: 100%;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ h1
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.page_title_box{
	margin-top:50px;
	background:var(--color-beige);
	display:flex;
	justify-content: center;
	align-items: center;
	padding:50px 20px 90px;
	position:relative;
}
@media only screen and (min-width: 1117px) {
	.page_title_box{
		padding:100px 20px 90px;
		margin-top:91px;
	}
}
.page_title_box::before{
	position:absolute;
	bottom:0px;
	left:0px;
	content: "";
	display: block;
	width: 200px;
	aspect-ratio: 9/7;
	background-image: url(../../img/competition/img_h1_flower_left.png);
	background-size: cover;
	background-position: center;
	z-index:1;
}
.page_title_box::after{
	position:absolute;
	top:0px;
	right:0px;
	content: "";
	display: block;
	width: 220px;
	aspect-ratio: 97/51;
	background-image: url(../../img/competition/img_h1_flower_right.png);
	background-size: cover;
	background-position: center;
	z-index:1;
}
@media (min-width: 738px) {
	.page_title_box::before{
		width: 280px;
	}
	.page_title_box::after{
		width: 308px;
	}	
}
@media (min-width: 1117px) {
	.page_title_box::before{
		width: 350px;
	}
	.page_title_box::after{
		width: 385px;
	}	
}
h1.page_title{
	margin-top:0px;
	margin-bottom:0px;
	position:relative;
	text-align: center;
}
h1.page_title::after{
	position: absolute;
    bottom: -50px;
    left: 50%;
	transform: translateX(-50%); /* ← 中央揃えのポイント */
    content: "";
    display: block;
    width: 100px;
    aspect-ratio: 266 / 106;
    background-image: url(../../img/competition/img_h1_decoration.png);
    background-size: cover;
    background-position: center;
}

h1.page_title .title_en {
	display: block;
	font-size: clamp(18px, 4vw, 23px);
	color: var(--color-brown-dark);
	font-family: 'Cinzel', serif;
}

h1.page_title .title_jp {
  	display: block;
  	/* font-size: clamp(最小サイズ, 推奨サイズ, 最大サイズ)
     → 画面幅に応じて自動でサイズ調整される（スマホ〜PC対応） */
	font-size: clamp(30px, 5vw, 45px);
	color: var(--color-brown-dark);
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ h2
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h2.section_title{
	margin-top: clamp(40px, 3.5vw, 60px);
	margin-bottom: clamp(35px, 3vw, 45px);
	text-align:center;
	font-weight:bold;
}
h2.section_title .title_en{
	display:block;
	font-size:1.5rem;
	font-size: clamp(18px, 4vw, 23px);
	color:var(--color-primary-navy);
	font-family: 'Cinzel', serif;
}
h2.section_title .title_jp{
	display:block;
	font-size: clamp(25px, 4vw, 36px);
	color:var(--color-primary-navy);
}
/* 記事用のh2 */
h2.news_title{
	margin-top:4rem;
	margin-bottom:3rem;
	font-size: clamp(25px, 4vw, 36px);
}
h1.page_title + h2{
    margin-top: 0px;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ h3
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h3.area_title{
	 margin-top: clamp(35px, 3vw, 55px);
	margin-bottom: clamp(33px, 2.8vw, 43px);
	font-size: clamp(22.5px, 3.5vw, 30px);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-accent-gold);
	color:  var(--color-accent-gold);
	text-align: justify;
}
h2.section_title + h3 {
    margin-top: 0px;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ h4
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h4.double_line {
	margin-top: clamp(30px, 2.5vw, 50px);
	margin-bottom: clamp(30px, 2vw, 40px);
	position: relative;
	padding-left: 16px;
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.3;
	color:var(--color-primary-navy);
}
h3 + h4.double_line{
	margin-top: 0px;
}
/* 太線 */
h4.double_line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1.2em;
  width: 3px;
  background-color: var(--color-primary-navy);
}

/* 細線 */
h4.double_line::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 1.2em;
  width: 1px;
  background-color: var(--color-primary-navy);
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ h5
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h5.circle{
	margin-top: clamp(28px, 2vw, 45px);
	margin-bottom: clamp(30px, 2vw, 40px);
	font-size: clamp(18px, 2.5vw, 22.5px);
	position: relative;
	padding: 6px 0 6px 25px;
}
h5.circle:before{
	content: "";
    position: absolute;
    left: 0;
    background:var(--color-accent-gold);	
	border-radius:50%;
	width:16px;
	height:16px;
	top:50%;
	transform: translateY(-50%);
	margin-top:2px;/* 位置調整 */
}
h4.double_line + h5.circle{
	margin-top: 0px;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ h6
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h6{
	margin-top: clamp(25px, 2vw, 40px);
	margin-bottom: clamp(30px, 2vw, 40px);
	font-size: clamp(16.5px, 2vw, 18px);
}
/*--------------------------------------------------------
■ p
--------------------------------------------------------*/

p{
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	p{
		margin-bottom: var(--margin_bottom_ml);
	}
}
p.img_title,
p.table_title
{
	margin-bottom: 5px;
}
p.error{
	font-weight: bold;
	color:#eb2f5d;
}
/*--------------------------------------------------------
 ■ ファーストビューa
--------------------------------------------------------*/
main{
	margin-top:50px;
}
@media only screen and (min-width: 1117px){
	main{
		margin-top:91px;
	}	
}
div.first_view{
	width:100%;
	position:relative;
}
div.first_view::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 35%;
	aspect-ratio: 470/606;
	background-image: url("path/to/image.png");
	background-size: contain; 
	background-repeat: no-repeat;
	z-index: 1; 
	background-image: url(../../../view/competition/top/img_first_view_decoration_left.png);
}
div.first_view::after{
	content: "";
	position: absolute;
	top: 0px;
	right: 0;
	width: 35%;
	aspect-ratio: 470/606;
	background-image: url("path/to/image.png");
	background-size: contain; 
	background-repeat: no-repeat;
	z-index: 1;
	background-image: url(../../../view/competition/top/img_first_view_decoration_right.png);
}
@media only screen and (min-width: 738px){
	div.first_view::before,
	div.first_view::after{
		width: 15%;
	}	
}
div.first_view .first_view_main_img{
	width:100%;
}
div.first_view .first_view_txt{
	width:130px;
	position:absolute;
	top: 5%;
	right:2%;
	z-index:2;
}
@media only screen and (min-width: 738px){
	div.first_view .first_view_txt{
		width:400px;
		position:absolute;
		top: 30%;
		right:0%;
	}
}
@media only screen and (min-width: 1117px){
	div.first_view .first_view_txt{
		width:600px;
		position:absolute;
		top: 17%;
		right:10%;
	}
}
@media only screen and (min-width: 1440px){
	div.first_view .first_view_txt{
		width:800px;
		position:absolute;
		top: 26%;
		right:10%;
	}
}
div.first_view .first_view_news_box{
	position:absolute;
	bottom:34%;
	left:50%;
	transform: translateX(-50%);
	background-image: url(../../../view/competition/top/img_first_view_old_paper.png);
	background-size: cover;       /* 背景画像を要素全体にフィットさせる */
	background-position: center;  /* 中央寄せ */
	width: 90%;
	aspect-ratio: 2752/353;
	max-width: 600px;             /* お好みで幅を調整 */
	padding: 10px 10px;
	display:flex;
	align-items: center;
	justify-content: center;
	z-index:2;
}
@media only screen and (min-width: 738px){
	div.first_view .first_view_news_box{
		width:60%;
		bottom:15%;
	}
}
@media only screen and (min-width: 1117px){
	div.first_view .first_view_news_box{
		width:60%;
		bottom:35%;
	}
}
div.first_view .first_view_news_txt{
	/* font-size: 0.95rem; */
	line-height: 1.6;
	color: #492d1c;
	margin-bottom:0px;
}
@media only screen and (min-width: 738px){
	div.first_view .first_view_news_txt{
		font-size: 1.1rem;
	}
}
@media only screen and (min-width: 1117px){
	div.first_view .first_view_news_txt{
		font-size: 1.5rem;
	}	
}
div.first_view .first_view_view_more_btn{
	background:var(--color-accent-gold);
	color:#fff;
	font-size:0.8rem;
	padding:5px;
	border-radius: 5px;
	cursor:pointer;
}
div.first_view .first_view_logo{
	position:absolute;
	width:110px;
	left:5px;
	top:5px;
	z-index:2
}
@media only screen and (min-width: 738px){
	div.first_view .first_view_logo{
		width:160px;
		left:10px;
		top:10px;
	}
}
@media only screen and (min-width: 1117px){
	div.first_view .first_view_logo{
		width:250px;
	}
}
div.first_view .first_view_logo_img{
	width:100%;
}
/*--------------------------------------------------------
 ■ ドア型ボックス
--------------------------------------------------------*/
.door_box{
	background:var(--color-white);
	margin-top:92px;
	position:relative;
	padding-top:50px;
	width:calc(100% - 20px);
	margin-right:auto;
	margin-left:auto;
	margin-bottom:70px;
	max-width:1117px;
}
@media only screen and (min-width: 738px){
	.door_box{
		margin-top:386px;
		margin-bottom:250px;
	}
}
@media only screen and (min-width: 1117px){
	.door_box{
		margin-top:504px;
		margin-bottom:250px;
	}
}
.door_box::before {
	position:absolute;
	top:1px;
	content: "";
	display: block;
	width: 370px;
	width:100%;
	aspect-ratio: 1320/730;
	background-image: url(../../../view/competition/top/img_bg_door_top.png);
	background-size: cover;
	background-position: center;
	z-index:1;
	transform: translateY(-100%); /* ← コレで要素の高さ分上にずらす */
}
.door_box::after {
	position:absolute;
	bottom:-52px;
	bottom:1px;
	content: "";
	display: block; 
	width:100%;
	aspect-ratio: 1320/247;
	background-image: url(../../../view/competition/top/img_bg_door_bottom.png);
	background-size: cover;
	background-position: center;
	z-index:1;
	transform: translateY(100%); /* ←これで要素の高さ分「親要素の下」に出す */
}
.door_box .door_box_content{
	margin-top:-221px;
	position:relative;
  	z-index: 2;
  	text-align: center;
	padding:0px 20px;
	width:100%;
}
@media only screen and (min-width: 738px){
	.door_box .door_box_content{
		margin-top:-400px;
		padding:0px 40px;
		width:100%;
	}	
}
@media only screen and (min-width: 1117px){
	.door_box .door_box_content{
		margin-top:-474px;
	}	
}
.door_box .door_box_content::before{
	position:absolute;
	bottom:-100px;
	left:-80px;
	content: "";
	display: block;
	width: 220px;
	aspect-ratio: 620/940;
	background-image: url(../../../view/competition/top/img_decoration_rose_left.png);
	background-size: cover;
	background-position: center;
	z-index:1;
}
.door_box .door_box_content::after{
	position:absolute;
	top:0px;
	right:-80px;
	content: "";
	display: block;
	width: 200px;
	aspect-ratio: 55/94;
	background-image: url(../../../view/competition/top/img_decoration_poppy_right.png);
	background-size: cover;
	background-position: center;
	z-index:1;
}
@media only screen and (min-width: 738px){
	.door_box .door_box_content::before{
		width: 280px;
	}
	.door_box .door_box_content::after{
		width: 250px;
	}	
}
@media only screen and (min-width: 1117px){
	.door_box .door_box_content::before{
		width: 380px;
		left:-200px;
		bottom:-200px;
	}
	.door_box .door_box_content::after{
		width: 350px;
		top:-50px;
		right:-150px;		
	}	
}
.door_box .door_box_title{
	margin-bottom:25px;
	display:block;
	color:var(--color-primary-navy);
	font-weight:600;
	font-size:1.1rem;
}
@media only screen and (min-width: 738px){
	.door_box .door_box_title{
		font-size:2rem;
		margin-bottom:50px;
		line-height:3rem;
	}	
}
.door_box .door_box_txt{
	line-height:3rem;
	font-size:1.1rem;
}
/*--------------------------------------------------------
 ■ 特徴ブロック
--------------------------------------------------------*/
.feature_block .feature_item{
  	display: grid;
  	grid-template-columns: 1fr; /* SP: 1カラム */
	position: relative;
	overflow: hidden;
}
@media (min-width: 738px) {
  .feature_block .feature_item {
    grid-template-columns: 2fr 3fr;
    align-items: center;
	align-items: stretch; /* ← これで両カラムの高さ揃う */
  }
}
/* 中身を前面に出す */
.feature_txt_container,
.feature_img_container {
	position: relative;
	z-index: 1;
}
.feature_block .feature_txt_container{
	display:flex;
	align-items: center;
	background:var(--color-primary-navy);
	padding:10px;
	position: relative;
	z-index: 1;
}
/* 色違い */
.feature_block .yellow .feature_txt_container{
	background:var(--color-accent-gold);
}
/* 擬似要素で背景模様を重ねる */
.feature_block .feature_txt_container::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../../../view/competition/top/img_bg_pattern.png);
	background-size: cover; /* or contain */
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.1; 
	pointer-events: none; /* クリックやスクロールの邪魔をしない */
	z-index: 2;
}
.feature_block .yellow .feature_txt_container::before {
	opacity: 0.2; 
}
.feature_block .feature_txt_border_outer{
	border:3px solid #fff;
	padding:6px;
	width:100%;
	height:100%;
}
.feature_block .feature_txt_border_inner{
	border:1px solid #fff;
	padding:30px 40px 40px 40px;
	width:100%;
	height:100%;
	text-align: center;
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.feature_block .feature_num{
	color:var(--color-accent-gold);
	font-size:2rem;
}
.feature_block .yellow .feature_num{
	color:var(--color-accent-gold-light);
}
.feature_block .feature_title_small{
	color:#fff;
	font-size:1.1rem;
}
.feature_block .feature_title{
	color:#fff;
	font-size:1.8rem;
	margin-top:1.5rem;
	margin-bottom:2rem;
}
.feature_block .feature_txt{
	color:#fff;
}
@media (min-width: 738px) {
	.feature_block .feature_num{
		font-size:2.5rem;
	}
	.feature_block .feature_title_small{
		font-size:1.5rem;
	}
	.feature_block .feature_title{
		font-size:2.2rem;
	}
	.feature_block .feature_txt{
		font-size:1.1rem;
	}	
}
.feature_block .feature_img_container{
	display:flex;
}
.feature_block .feature_img{
	width:100%;
	height: 100%;
	object-fit: cover; /* アスペクト比を保ったまま fill（切り取りあり） */	
}
/*--------------------------------------------------------
 ■ ニュースブロック
--------------------------------------------------------*/
.information_block{
    width: calc(100% - 20px);
    margin-right: auto;
    margin-left: auto;
    max-width: 1117px;
	border:var(--color-primary-navy) solid 3px;
	padding:6px;
	background: var(--color-white);
}
.information_block .information_inner{
	border: 1px solid var(--color-primary-navy);
	padding: 12px;
}
.information_block .information_post{
	display:flex;
	flex-direction: column;
	border-bottom: 1px solid var(--color-gray);
	padding: 10px 8px 12px;
	position:relative;
	gap:4px;
}
.information_block .information_post:last-child{
	border:none;
}
@media (min-width: 738px) {
	.information_block .information_post{
		flex-direction:row;
		gap:10px;
		padding: 16px 10px 20px;
		transition: background-color 0.5s ease;
	}
	.information_block .information_post:hover {
  		background: #f8f8f8;
	}	
}
.information_block .information_data{
	display:flex;
	gap:4px;
}
.information_block .information_date{
	margin-right: 4px;
	color:var(--color-primary-navy);
	font-weight: 500;
}
.information_block .information_label{
	background:var(--color-primary-navy);
	border-radius:5px;
	color:#fff;
	padding:2px 4px;
	font-size: 0.8rem;
}
.information_block .information_title{
	font-size:1rem;
}
.information_block .information_link{
	color:var(--color-black);
}
/* post全体をクリック可能に */
.information_block .information_link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/*--------------------------------------------------------
 ■ データリスト
--------------------------------------------------------*/
.data_list{
    margin-right: auto;
    margin-left: auto;
    max-width: 1117px;
	margin-bottom: var(--margin_bottom_s);
}
@media (min-width: 738px) {
	.data_list{
		margin-bottom: var(--margin_bottom_ml);
	}
}
.data_list.decoration{
	position:relative;
}
.data_list.decoration::before{
	position:absolute;
	bottom:-100px;
	left:-65px;
	content: "";
	display: block;
	width: 200px;
	aspect-ratio: 62/94;
	background-image: url(../../../view/competition/top/img_decoration_rose_left.png);
	background-size: cover;
	background-position: center;
	z-index:-1;
}
.data_list.decoration::after{
	position:absolute;
	top:-200px;
	right:-50px;
	content: "";
	display: block;
	width: 200px;
	aspect-ratio: 55/94;
	background-image: url(../../../view/competition/top/img_decoration_poppy_leaf_right.png);
	background-size: cover;
	background-position: center;
	z-index:-1;
}
@media (min-width: 738px) {
	.data_list.decoration::before{
		width: 250px;
	}
	.data_list.decoration::after{
		width: 250px;
	}	
}
.data_list .data_group{
	display:flex;
	flex-direction: column;
	border-bottom:1px solid var(--color-gray);
	padding: 15px 8px;
	position:relative;
	z-index:3;
}
@media (min-width: 738px) {
	.data_list .data_group{
		flex-direction: row;
	}
}
.data_list .data_term{
	font-weight:bold;
	font-size:1.1rem;
}
@media (min-width: 738px) {
	.data_list .data_term{
		width:20%;
	}
}
.data_list .data_desc{
	display:inline-block;
	font-size:1.1rem;
}
@media (min-width: 738px) {
	.data_list .data_desc{
		/* width:calc(100% - 280px); */
		width:80%;
	}
}
/*--------------------------------------------------------
 ■ 更新メッセージ付きナビ
--------------------------------------------------------*/
div.nav_update_message{
	background:#ea9c2e;/* 青色だとnavの色と被り、目立ちづらいため黄色に */
	position: fixed;
	display:flex;
	justify-content: center;
	align-items: center;
	top: 0;
	width: 100%;
	min-height:50px;
	transform: translateY(-100%);
	opacity: 0.96;
	font-weight: 600;
	z-index: 2000;
	transition: transform 0.24s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	padding:0 12px;
}
@media only screen and (min-width: 1117px){
	div.nav_update_message{
		min-height:63px;
	}
}
div.nav_update_message.show {
    transform: translateY(0);
}
div.nav_update_message .message{
	display:flex;
	align-items: center;
	width:calc(100% - 40px);
	color:#fff;
	padding:10px 0;
}
@media only screen and (min-width: 1117px){
	div.nav_update_message .message{
		justify-content: center;/* 大画面のときは、文字を中央に持ってくる */
	}
}
div.nav_update_message .message i{
	font-size:18px;
}
div.nav_update_message .close_btn{
	display:flex;
	justify-content: center;
	align-items: center;
	width:40px;
	height:100%;
	color:#fff;
	font-size:20px;
	cursor: pointer;
}
div.nav_update_message .close_btn i{
	margin-right:0px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ breadcrumb_box
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

div.breadcrumb_box{
	background-color:#e8f1ff;
	line-height:24px;
	padding:6px 0;
	border-bottom:1px solid #dddddd;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.breadcrumb_box{
		margin-bottom: var(--margin_bottom_ml);
	}
}
.breadcrumb:before{
	color: #5193f7;
	vertical-align: top;
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	content: '\f0da';/* 右のアイコン */
	font-weight:900;
	font-style: normal;
	margin: 0 15px;
	-webkit-font-smoothing: antialiased;
}
.breadcrumb:first-child:before{
	content: '\f015';/* 家のアイコン */
	margin: 0 12px 0 0;/* ホームアイコンの右マージンを調整してバランスを取る */
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ footer
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.footer{
	background:var(--color-primary-navy);
	position: relative;
	padding: 30px 0 20px 0;
	width:100%;
	margin-top:8rem;
}
/* 擬似要素で背景模様を重ねる */
.footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../../../view/competition/top/img_bg_pattern.png);
	background-size: 600px 600px; /* ← 指定サイズで繰り返し */
	background-repeat: repeat;
	background-position: center;
	pointer-events: none; /* クリックやスクロールの邪魔をしない */
	opacity: 0.1;
	/* z-index: 2; */
}
.footer .footer_inner{
	width: calc(100% - 20px);
    margin-right: auto;
    margin-left: auto;
    max-width: 1117px;
	display:flex;
	flex-direction: column;
	gap:10px;
}
.footer::before{
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 8px;
  background-image:
    linear-gradient(
      to bottom,
      white 0px,
      white 3px,
      transparent 3px,
      transparent 7px,
      white 7px,
      white 8px
    );
}
.footer .footer_logo{
	width:110px;
	margin-right:auto;
	margin-left:auto;
}
.footer .footer_logo_img{
	width:100%;
	margin-bottom:0px;
}
.footer .footer_sns{
	display:flex;
	justify-content: center;
	gap:20px;
}
.footer .footer_sns_link{
	width:30px;
	cursor: pointer;
}
.footer .footer_sns_img{
	width:100%;
}
.footer .footer_link_group{
	display:flex;
	margin: 10px 0;
	text-align: right;
	justify-content: flex-end;
	flex-direction: column;
	gap:5px;
	list-style: none;
}
@media only screen and (min-width: 738px){
	.footer .footer_link_group{
		justify-content: center;
		flex-direction: row;
		gap:20px;
	}
}
.footer .footer_link_item{
	padding:4px 0;
	cursor: pointer;
}
.footer .footer_link{
	display: block;
	color: #ffffff;
}
.footer .footer_copyright_txt{
	color: #ffffff;
	font-size:0.8rem;
}
/*--------------------------------------------------------
■ ul li
--------------------------------------------------------*/


/*--------------------------------------------------------
■ copyright
--------------------------------------------------------*/

footer div.copyright{
	color: #ffffff;
	text-align: center;
	background-color: #2a77eb;
	font-weight: normal;
	padding: 10px;
}

/*--------------------------------------------------------
■ adsense
--------------------------------------------------------*/

div.sub_box div.adsense{
	margin-left:-5px;
	margin-right:-5px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.sub_box div.adsense{
		margin-bottom: var(--margin_bottom_ml);
		margin-left:0px;
		margin-right:0px;
	}
}

/*********************************************************
ul olについて

以下の仕様を実装するために、やや複雑になっている。

・liの中で2行になった場合、line-heightは他の要素と同じにしたい。
→ line-heightを大きくするのではなく、各liに上下5pxのパディングを設ける。・・・① 各liのパディング調整

・pタグなどの他のタグと同様、ulのmargin-bottomは25pxとしたい
→ 最初のliのmargin-topを-5px、最後のliのmargin-bottomを-5pxとする。・・・② 上下のマージン調整

*********************************************************/

/*--------------------------------------------------------
■ ul li
--------------------------------------------------------*/

ul{
	margin-left: 25px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	ul{
		margin-bottom: var(--margin_bottom_ml);
	}
}
ul ul,
ol ul{/* 入れ子に対応 */
	margin-bottom: 0px;
}
ol ul{/* 入れ子に対応 */
	list-style-type: disc;
}
ol ol{/* 入れ子に対応 */
	list-style-type: decimal;
}
ul li.none{/* olは番号をスキップしないため用意しない */
	list-style-type: none;
}

/* ① 各liのパディング調整 */

ul li{
	padding: 4px 0;
}
ul li ul li:nth-child(1),
ul li ol li:nth-child(1){
	padding-top: 8px;/* 最初を調整 */
}

/* ② 上下のマージン調整 */

ul li:nth-child(1){
	margin-top: -4px;/* 最初を調整 */
}
ul li ul li:nth-child(1),
ul li ol li:nth-child(1){
	margin-top: 0px;/* 但し、レベル2は調整しない */
}
ul li:nth-last-child(1){
	margin-bottom: -4px;/* レベル1の最後を調整 */
}

/*--------------------------------------------------------
■ ol li
--------------------------------------------------------*/

ol{
	margin-left: 25px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	ol{
		margin-bottom: var(--margin_bottom_ml);
	}
}
ul ol,
ol ol{/* 入れ子に対応 */
	margin-bottom: 0px;
}

/* ① 各liのパディング調整 */

ol li{
	padding: 5px 0;
}
ol li ul li:nth-child(1),
ol li ol li:nth-child(1){
	padding-top: 10px;/* 最初を調整 */
}
ol li ul li:nth-last-child(1),
ol li ol li:nth-last-child(1){
	padding-bottom: 0px;/* 最後を調整 */
}

/* ② 上下のマージン調整 */

ol li:nth-child(1){
	margin-top: -5px;/* 最初を調整 */
}
ol li ul li:nth-child(1),
ol li ol li:nth-child(1){
	margin-top: 0px;/* 但し、レベル2は調整しない */
}
ol li:nth-last-child(1){
	margin-bottom: -5px;/* レベル1の最後を調整 */
}
ol li ul li:nth-last-child(1),
ol li ol li:nth-last-child(1){
	margin-bottom: 0px;/* 但し、レベル2は調整しない */
}

/*--------------------------------------------------------
■ ol li 丸数字
--------------------------------------------------------*/
ol.ol_circle{
	list-style-type:none;
	margin-left:0px;
	counter-reset: list-counter;
}
.ol_circle li{
	position:relative;
	padding-left:34px;
	display:flex;
	align-items: center;
}
.ol_circle li:before{
	display: flex;
	align-items: center;
	justify-content:center;
    position: absolute;
    left: 0;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
    border-radius: 50%;
    color: #fff;
    counter-increment: list-counter;
    content: counter(list-counter);
    font-weight:bold;
}
/* 色違い */
.ol_circle.navy li:before{
	background: var(--color-primary-navy);
}
.ol_circle.brown li:before{
	background: var(--color-brown-dark);
}
.ol_circle.gold li:before{
	background: var(--color-accent-gold);
}
/*--------------------------------------------------------
■ hr 
--------------------------------------------------------*/

hr{
	border: 0;
	border-top: 1px solid var(--color-primary-navy);
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	hr{
		margin-bottom: var(--margin_bottom_ml);
	}
}
hr.gold{
	border: 0;
	border-top: 1px solid var(--color-accent-gold);
	margin-bottom: var(--margin_bottom_s);
}
.double_line_hr {
  position: relative;
  border: none;
  height: 10px; /* 3px + 4px + 1px = 8px、少し余裕を持たせて10px */
  background: transparent;
  margin: 2em 0;
  padding: 0;
}

.double_line_hr::before,
.double_line_hr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--color-black); /* 線の色を調整可 */
}

.double_line_hr::before {
  height: 3px;
  top: 0;
}

.double_line_hr::after {
  height: 1px;
  top: 7px; /* 3px（上の線） + 4px（スペース） */
}


/*--------------------------------------------------------
■ img
--------------------------------------------------------*/

img{
	width:100%;
	max-width:100%;
	height:auto;
	margin-bottom: var(--margin_bottom_s);
	vertical-align:bottom;
}
@media only screen and (min-width: 738px){
	img{
		margin-bottom: var(--margin_bottom_ml);
	}
}
/*--------------------------------------------------------
■ video
--------------------------------------------------------*/

div.main_box video{
	width:100%;
	max-width:100%;
	height:auto;
	margin-bottom: var(--margin_bottom_s);
	vertical-align:bottom;
}
@media only screen and (min-width: 738px){
	div.main_box video{
		margin-bottom: var(--margin_bottom_ml);
	}
}

/*********************************************************
■ main_box common（広範囲に影響を与えるクラス）※ 全controller共通の前提
*********************************************************/

/*********************************************************
■ main_box specific（main_box内で局所的に影響を与えるクラス）
 （.page_link_box）
*********************************************************/

/*=================================
■ 全controller共通
=================================*/

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
■ box
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

/*--------------------------------------------------------
■ page_link_box
--------------------------------------------------------*/

.page_link_box{
	padding: 30px 20px 17px 20px;
	overflow: hidden;/*子要素のmargin-bottomを有効化させるために必要*/
	margin-bottom: var(--margin_bottom_s);
	border:1px solid var(--color-accent-gold);
	max-width: 1117px;
	margin-top:50px;
	margin-right: auto;
    margin-left: auto;
	position:relative;
	overflow:visible;
}
@media only screen and (min-width: 738px){
	.page_link_box{
		padding: 45px 30px 22px 30px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
.page_link_box .corner {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--color-pastel-beige);
  box-sizing: border-box;
}
/* 各角ごとの線と曲線 */
.page_link_box .top_left {
  top: -1px;
  left: -1px;
  border-bottom: 1px solid var(--color-accent-gold);
  border-right: 1px solid var(--color-accent-gold);
  border-bottom-right-radius: 100%;
}

.page_link_box .top_right {
  top: -1px;
  right: -1px;
  border-bottom: 1px solid var(--color-accent-gold);
  border-left: 1px solid var(--color-accent-gold);
  border-bottom-left-radius: 100%;
}

.page_link_box .bottom_left {
  bottom: -1px;
  left: -1px;
  border-top: 1px solid var(--color-accent-gold);
  border-right: 1px solid var(--color-accent-gold);
  border-top-right-radius: 100%;
}

.page_link_box .bottom_right {
  bottom: -1px;
  right: -1px;
  border-top: 1px solid var(--color-accent-gold);
  border-left: 1px solid var(--color-accent-gold);
  border-top-left-radius: 100%;
}

.page_link_box .page_link_box_title{
	position:absolute;
	font-size: 16px;
	font-weight: bold;
	color: var(--color-accent-gold);
	text-align: center;
	background:var(--color-pastel-beige);
	top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 60px;
	padding:0px 20px;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
@media only screen and (min-width: 738px){
	div.page_link_box .page_link_box_title{
		font-size: 17px;
	}
}

.page_link_box .page_link_box_title_jp,
.page_link_box .page_link_box_title_en{
	display:block;
}
.page_link_box .page_link_box_title_en{
	font-family: 'Cinzel', serif;
}
.page_link_box ul,
.page_link_box ol,
.page_link_box ul a,
.page_link_box ol a{
	font-weight: bold;
	color: var(--color-black);
	margin-bottom:0px;/* box内のul,olのmargin-bottomは無くす */
}

.page_link_box ul ul,
.page_link_box ul ol,
.page_link_box ol ul,
.page_link_box ol ol,
.page_link_box ul ul a,
.page_link_box ul ol a,
.page_link_box ol ul a,
.page_link_box ol ol a{
	font-weight: normal;
	color: var(--color-black);
}

/*--------------------------------------------------------
li全体をリンクにするための調整
--------------------------------------------------------*/

.page_link_box a{
	display: block;
	padding:4px 0;
	padding:6px 0;
}
/* aタグがパディングを受け持つため「① 各liのパディング調整」（←で検索）を上書き調整 */
.page_link_box ol li,
.page_link_box ul li{
	padding: 0;
}
.page_link_box ol li ol li:nth-child(1),
.page_link_box ol li ul li:nth-child(1),
.page_link_box ul li ol li:nth-child(1),
.page_link_box ul li ul li:nth-child(1){
	padding-top: 0;/* 最初を調整 */
}
/*--------------------------------------------------------
■ border_box
--------------------------------------------------------*/
.border_box{
	position: relative;
	margin-top: 25px;/* タイトルの位置を-10するため、前の要素とのマージンを25px（15 + 10）取る。 */
	margin-bottom: var(--margin_bottom_s);
	padding:6px;
}
@media only screen and (min-width: 738px){
	.border_box{
		margin-top: 30px;/* タイトルの位置を-10するため、前の要素とのマージンを35px（25 + 10）取る。 */
		margin-bottom: var(--margin_bottom_ml);
	}
}
.border_box .border_box_inner{
	width:100%;
	height:100%;
	padding: 20px 20px 17px 20px;
}
@media only screen and (min-width: 738px){
	.border_box .border_box_inner{
		/* padding-topはタイトルのはみだし分余裕を持たせる */
		padding: 30px 30px 22px 30px;
	}	
}

.border_box div.title{
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary-navy);
    text-align: center;
    background: var(--color-pastel-beige);
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 20px;
	padding:0px 20px;
	display:flex;
	justify-content: center;
	align-items: center;
}
@media only screen and (min-width: 738px){
	.border_box div.title{
		padding: 0 15px;
		font-size: 20px;
	}
}
/* 色違い */
.border_box.navy{
	border:solid 3px var(--color-primary-navy);
}
.border_box.brown{
	border:solid 3px var(--color-brown-dark);
}
.border_box.gold{
	border:solid 3px var(--color-accent-gold);
}
.border_box.navy .border_box_inner{
	border:solid 1px var(--color-primary-navy);
}
.border_box.brown .border_box_inner{
	border:solid 1px var(--color-brown-dark);
}
.border_box.gold .border_box_inner{
	border:solid 1px var(--color-accent-gold);
}
.border_box.navy div.title{
	color: var(--color-primary-navy);
}
.border_box.brown div.title{
	color: var(--color-brown-dark);
}
.border_box.gold div.title{
	color: var(--color-accent-gold);
}


/* ボックス内要素 */
.border_box p,
.border_box ul,
.border_box ol,
.border_box img,
.border_box div.mswa_ms{
	margin-bottom: 8px;/* boxの左右paddingは10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
.border_box ul ul,
.border_box ul ol,
.border_box ol ul,
.border_box ol ol{
	margin-bottom: 8px;/* boxの左右paddingは10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
@media only screen and (min-width: 738px){
	.border_box p,
	.border_box ul,
	.border_box ol,
	.border_box img,
	.border_box div.mswa_ms{
		margin-bottom: 10px;/* boxの左右paddingは15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
	.border_box ul ul,
	.border_box ul ol,
	.border_box ol ul,
	.border_box ol ol{
		margin-bottom: 10px;/* boxの左右paddingは15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
}
/*--------------------------------------------------------
■ background_box
--------------------------------------------------------*/
.background_box{
	overflow: hidden;
	margin-bottom: var(--margin_bottom_s);
	padding:20px 20px 17px 20px;
}
@media only screen and (min-width: 738px){
	.background_box{
		padding:30px 30px 22px 30px;/* padding-topはタイトルのline-heightの影響で文字の上には4pxの余白があるため、(取りたい余白15px)-4px=11pxとした */
		margin-bottom: var(--margin_bottom_ml);
	}
}

.background_box div.title{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 18px;
}
@media only screen and (min-width: 738px){
	.background_box div.title{
		font-size: 20px;
		margin-bottom: 20px;
	}
}
/* 色違い */
.background_box.beige{
	background-color: var(--color-beige);
}
.background_box.white{
	background-color: var(--color-white);
}
.background_box.gold{
	background-color: var(--color-accent-gold-light);
}
.background_box.beige .title{
	color:var(--color-black);
}
.background_box.white .title{
	color:var(--color-primary-navy);
}
.background_box .ol_circle .title{
	margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	.background_box .ol_circle .title{
	    margin-bottom:15px;
	}
}
/* ボックス内要素 */
.background_box p,
.background_box ul,
.background_box ol,
.background_box img,
.background_box div.mswa_ms{
	margin-bottom: 8px;/* 取りたい余白は10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
.background_box ul ul,
.background_box ul ol,
.background_box ol ul,
.background_box ol ol{
	margin-bottom: 8px;/* 取りたい余白は10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
/* ボックス内要素 */
@media only screen and (min-width: 738px){
	.background_box p,
	.background_box ul,
	.background_box ol,
	.background_box img,
	.background_box div.mswa_ms{
		margin-bottom: 10px;/* 取りたい余白は15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
	.background_box ul ul,
	.background_box ul ol,
	.background_box ol ul,
	.background_box ol ol{
		margin-bottom: 10px;/* 取りたい余白は15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
}
/*--------------------------------------------------------
■ この記事を書いた人box
--------------------------------------------------------*/
.writer_box{
	margin-top:50px;
	margin-bottom:var(--margin_bottom_s);
	position:relative;
	border:solid 1px var(--color-accent-gold);
	display:flex;
	align-items: center;
	padding:25px 10px 10px 10px;
	gap:10px;
}
@media only screen and (min-width: 738px){
	.writer_box{
		margin-bottom:var(--margin_bottom_ml);
	}
}
.writer_box .writer_box_title{
	position:absolute;
	top: -2.1rem;
	left:-1px;
	background:var(--color-accent-gold);
	color:#fff;
	padding:3px 10px;
}
.writer_box img{
	max-width:80px;
	margin-bottom:0px;
}
.writer_box .profile_block{
	display:flex;
	 flex-direction: column;
}
.writer_box .profile_block .writer_name{
	margin-bottom:5px;
}
/*--------------------------------------------------------
■ adsense
--------------------------------------------------------*/

div.main_box div.adsense{
	margin-left:-5px;
	margin-right:-5px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.adsense{
		margin-left:0px;
		margin-right:0px;
		margin-bottom: var(--margin_bottom_ml);
	}
}

/*--------------------------------------------------------
■ accordion_block
--------------------------------------------------------*/
div.main_box .accordion_block{
	width:100%;
}
div.main_box .accordion_block .accordion_item{
	width:100%;
	display:-webkit-box;
  	display:-ms-flexbox;
	display:flex;
	border-radius:10px;
	box-sizing:border-box;
	min-height:70px;
}
div.main_box .accordion_block .accordion_item.item_visible{
	padding:10px;
	margin-bottom: var(--margin_bottom_s);
	background:#5193f7;
	color:#fff;
	cursor:pointer;
}
@media only screen and (min-width: 738px){
	div.main_box .accordion_block .accordion_item.item_hidden{
		padding-top: 20px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box .accordion_block .accordion_item.item_visible.active{
	border-radius:10px 10px 0 0;
	margin-bottom:0px;
}
div.main_box .accordion_block .accordion_item.item_hidden{
	background:#e8f1ff;
	border-radius:0 0 10px 10px;
	display:none;
	padding: 15px 10px 0px 10px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box .accordion_block .accordion_item.item_hidden{
		padding-top: 20px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box .accordion_block .accordion_item.item_visible .txt{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	width:calc(100% - 30px - 10px);/* 30pxはアイコンのwidth、10pxはtxtの右margin */
	margin-right:10px;
	font-weight:bold;
}
div.main_box .accordion_block .accordion_item.item_hidden .txt .blue{
	color:#5193f7;
	margin-bottom:20px;
}
div.main_box .accordion_block .accordion_item.item_visible .icon{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
}
/* プラス／マイナスアイコン */
div.main_box .accordion_block .accordion_item.item_visible .icon i{
	font-size:22px;
	color:#fff;
	margin-right:0px;
}
/*--------------------------------------------------------
■ SNSボタン
--------------------------------------------------------*/
.sns_account_block{
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	max-width: 100%;
	margin-top:15px
}
@media only screen and (min-width: 738px){
	.sns_account_block{
		margin-top:0;
	}
}
.sns_account_block .title{
	margin-bottom: var(--margin_bottom_s);
	font-size: 16px;
	font-weight:bold;
}
.sns_account_block .content .sns_account_list{
	display: flex;
	margin:0;
	gap:20px;
	list-style: none;
	justify-content: center;
}
.sns_account_block .content .sns_account_list a{
	display:block;
	width:50px;
	height:50px;
}
.sns_account_block .content .sns_account_list img{
	width:50px;
	height:50px;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
■ 入力フォーム系
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*--------------------------------------------------------
■ フォームタイトル
--------------------------------------------------------*/

.form_block{
	margin-top: 15px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	.form_block{
		margin-bottom: var(--margin_bottom_ml);;
		margin-top: 20px;
	}
}
.form_block .form_title{
	font-weight: bold;
	font-size: 16px;
	margin-bottom:7.5px;
}
@media only screen and (min-width: 738px){
	.form_block .form_title{
		font-size: 20px;
		margin-bottom:10px;
	}
}
.form_block .value{
	margin-right: 7.5px;
	width: 100%;
}
@media only screen and (min-width: 738px){
	.form_block .value{
		margin-right:10px;
		width:100%;
	}
}
.form_block mark.required{
    color: #ffffff;
    background-color: var(--color-accent-gold);
    margin-left: 6px;
    font-size: 10px;
    padding:2px 8px;
    vertical-align:2px;/* 上下中央になるよう調整 */
}
@media only screen and (min-width: 738px){
	.form_block mark.required{
	    margin-left: 10px;
		font-size: 12px;
	}
}
.form_block mark.optional{
    color: #ffffff;
    background-color: var(--color-brown-dark);
	margin-left: 6px;
    font-size: 10px;
    padding:2px 8px;
	vertical-align:2px;/* 上下中央になるよう調整 */
}
@media only screen and (min-width: 738px){
	.form_block mark.optional{
	    margin-left: 10px;
	    font-size: 12px;
	}
}
/*--------------------------------------------------------
■ テキストボックス
--------------------------------------------------------*/

div.main_box div.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"]{/* textボックスにのみ対応するスタイル */
	border: 1px solid var(--color-gray);
	background-color: var(--color-white);
	cursor:text;
	-webkit-appearance: none;/* iPhone表示時に上に影ができる問題を修正 */
	width:100%;
	padding:0px 7.5px;/* heightで調整済みなので上下padding不要。iOSでプレイスフォルダがずれる問題があるが仕様とする */
	height:40px;
	font: 400 15px Arial;/* Chromeのユーザーエージェント仕様に合わせる */
}
@media only screen and (min-width: 738px){
	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="password"],
	input[type="search"]{
		padding:0px 10px;
		height:50px;
		font-size:16px;
	}
}
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder {
  color: #c0c0c0;
}
input[type="search"] {
  -webkit-appearance: searchfield;
}
/* input[type="search"]のバツボタンを非表示 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*--------------------------------------------------------
■ テキストエリア
--------------------------------------------------------*/

textarea{
	border: 1px solid var(--color-gray);
	background-color: var(--color-white);
    padding:10px;
    width: 100%;
    max-width:100%;
    min-height: 140px;
    line-height: 1.2;
    -webkit-appearance: none;
    overflow-y: scroll;/* スマホ版はスクロールさせる */
	-webkit-overflow-scrolling: touch;
	display: block;
	cursor:text;
	font: 400 16px Arial;/* Chromeのユーザーエージェント仕様に合わせる */
}

@media only screen and (min-width: 738px){
	textarea{
    	min-height: 100px;
		overflow-y: visible;
	}
}
textarea::placeholder {
  color: #c0c0c0;
}

/*--------------------------------------------------------
■ ラジオボタン
--------------------------------------------------------*/

.radio input{/* 他の入力フォーム同様、タブ移動＆スペースで移動できるように（display:noneだとタブ移動できなくなる） */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
.radio label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;/* 左を揃えるように */
	padding: 8px 20px;
}
.radio label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: 50%;
}
.radio input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -5px;         /* 10pxの円の左端を調整 */
	width: 10px;        /* 幅を大きく */
	height: 10px;       /* 高さも大きく */
	margin-top: -5px;   /* 垂直方向の中央に合わせて調整 */
	border-radius: 50%;
	background: var(--color-accent-gold);
}
/*--------------------------------------------------------
■ チェックボックス
--------------------------------------------------------*/

.checkbox input{/* 他の入力フォーム同様、タブ移動＆スペースで移動できるように（display:noneだとタブ移動できなくなる） */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:3px;
}
.checkbox label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;/* 左を揃えるように */
	padding: 8px 20px;
}

.checkbox label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--color-white);
	border: 1px solid var(--color-black);
}
.checkbox input[type="checkbox"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -6px;
	margin-top: -5px;
	/* ↓の5行。透明な長方形の左と下にボーダーを引き、それを反時計回りに45度回転させることによって、チェックマークをデザインしている */
	width: 12px;
	height: 8px;
	border-left: 3px solid var(--color-accent-gold);
	border-bottom:3px solid var(--color-accent-gold);
	transform: rotate(-45deg);
}

/*--------------------------------------------------------
■ 写真のアップロードボックス
--------------------------------------------------------*/
div.main_box div.img_upload_box_container{
	font-size:0px;
}
div.main_box div.img_upload_box{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
input[type="file"] {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    font-size: 100px;
    cursor: pointer;
    height:100%;
    width:100%;
}
div.main_box div.img_upload_box label {
   background: #e8f1ff;
   border: 2px solid #d8d8d8;
   padding: 10px;
   border-radius: 3px;
   display: inline-block;
   position: relative;
   height:300px;
   width:100%;
}
div.main_box div.img_upload_box label i.fa-file{
	font-size:40px;
	position:absolute;
	top:30%;
	left:calc(50% - 15px);
	margin-right:0px;
	color:#dddddd;
}
div.main_box div.img_upload_box span.insert_img_txt{
	position:absolute;
	top:calc(50% - 20px);
	padding:10px;
	left:0;
	font-size:15px;
}
div.main_box div.img_upload_box div.update_img_txt {
   display:none;
}
div.main_box div.img_upload_box button.clear_img_btn{
    opacity: 1;
    padding: 4px 8px;
    color: #5193f7;
    z-index: 7;
    border: 2px solid #5193f7;
    border-radius: 5px;
    position:absolute;
    top: auto;
    bottom:10px;
    right:10px;
    background:transparent;
    display: none;
    cursor: pointer;
}
div.main_box div.img_upload_box .img_display_box img{
   max-height:238px;
   width:auto;
}
/*--------------------------------------------------------
■ 動画のアップロードボックス
--------------------------------------------------------*/
div.main_box div.video_upload_box_container{
    font-size:0px;
}
div.main_box div.video_upload_box{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
input[type="file"] {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    font-size: 100px;
    cursor: pointer;
    height:100%;
    width:100%;
}
div.main_box div.video_upload_box label {
    background: #e8f1ff;
    border: 2px solid #d8d8d8;
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    height: 300px;
    width: 100%;
}
div.main_box div.video_upload_box label i.fa-file{
    font-size:40px;
    position:absolute;
    top:30%;
    left:calc(50% - 15px);
    margin-right:0px;
    color:#dddddd;
}
div.main_box div.video_upload_box span.insert_video_txt{
    position:absolute;
    top:calc(50% - 20px);
    padding:10px;
    left:0;
    font-size:15px;
}
div.main_box div.video_upload_box div.update_video_txt {
    display:none;
}
div.main_box div.video_upload_box button.clear_video_btn{
    opacity: 1;
    padding: 4px 8px;
    color: #5193f7;
    z-index: 7;
    border: 2px solid #5193f7;
    border-radius: 5px;
    position:absolute;
    top: auto;
    bottom:10px;
    right:10px;
    background:transparent;
    display: none;
    cursor: pointer;
}
div.main_box div.video_upload_box .video_display_box video{
    max-height:238px;
    width:100%;
}
/*--------------------------------------------------------
■ コメントとエラーメッセージ
--------------------------------------------------------*/

.comment{
	color:#808080;
	font-size: 12px;
	margin-bottom:9px;
	margin-top:3px;
}
@media only screen and (min-width: 738px){
	.comment{
		font-size: 14px;
		margin-bottom:12px;
		margin-top:4px;
	}
}

.comment.info{/* インフォメッセージ */
	font-weight: bold;
	color:var(--color-green);
}

.comment.error{/* エラーメッセージ */
	font-weight: bold;
	color:var(--color-red);
}
/* 背景色付きのエラーメッセージ */
.background_error{/* 初期表示は非表示(display:noneだが、jsでdisplay:blockにすることで表示させる */
	font-weight: bold;
    color:var(--color-red);
	text-align:center;
	background-color:var(--color-pastel-red);
	margin:0px auto 15px auto;
	padding:7.5px 22.5px;
	max-width:300px;
	font-size:10.5px;
	border-radius:6px;
}
@media only screen and (min-width: 738px){
	.background_error{
		margin:0px auto 25px auto;
		padding:10px 30px ;
		max-width:400px;
		font-size:14px;
		border-radius:8px;
	}
}
/* 上部のオブジェクトのlast_margin_bottomを考慮し、ネガティブマージンを与えたメッセージ */
.comment.negative_margin{
	margin-top: calc(var(--margin_bottom_s) * -1);
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.negative_margin{
		margin-top: calc(var(--margin_bottom_ml) * -1);
		margin-bottom: var(--margin_bottom_ml)
	}
}
.comment.cb_radio_bottom{/* チェックボックスやラジオボタンの下に来るメッセージ */
	margin-top:-5px;
}
.comment.margin_none{/* チェックボックスやラジオボタンの下に来るメッセージ */
	margin-top:0px;
	margin-bottom:0px;
}
/*--------------------------------------------------------
■ Datepicker（カレンダー）の設定
--------------------------------------------------------*/
.ui-widget-header {
    border: 1px solid #5193f7;
    background: #5193f7 url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
    color: #fff;
    font-weight: bold;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #e8f1ff;
    background: #e8f1ff url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #808080;
}

table.ui-datepicker-calendar span{
	color: #808080;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #ea9c2e;
    background: #ea9c2e;
    color: #ffffff;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #79b7e7;
    background: #5193f7 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #ffffff;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    cursor:pointer;
}
.ui-datepicker-header a:hover {
    background: #e8f1ff;
    display:block;/* クリック範囲を広げる */
    cursor:pointer;
}
/*--------------------------------------------------------
■ 入力ボックス（■ 全controller共通の入力フォーム系に移動の可能性あり？）
--------------------------------------------------------*/
div.main_box .form_block .detail_title{
	margin-bottom:6px;
	font-weight:bold;
}
div.main_box .form_block .detail_title.with_icon{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items: center;
  	margin-bottom:10px;
}
div.main_box .form_block .value.size_100_percent{
	width:100%;
}
div.main_box .form_block .flex_group{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items: center;
}
div.main_box .form_block .value.zip_1{
	width:70px;
}
div.main_box .form_block .value.zip_2{
	width:95px;
	margin:0 0 0 7.5px;
}
input[type="text"].bg_white_input,
div.main_box textarea.bg_white_input{
	background:#ffffff;
}
div.main_box textarea.trip_area{
	min-height:100px;
}
div.main_box textarea.message{
	min-height:200px;
}
div.main_box .bg_gray_box{
	background:#f3f3f3;
	border-radius:5px;
	padding:10px;
	font-size:12px;
}
div.main_box .bg_gray_box .example_img{
	margin:5px 0;
	text-align:center;
}
@media only screen and (min-width: 738px){
	div.main_box .bg_gray_box .example_img{
		text-align:left;
	}
}
div.main_box .bg_gray_box .example_img img{
	 margin-bottom:0;
	 width:300px;
}
div.main_box .form_block .pull_down{
	display:block;
	position:relative;
	width:250px;
}
div.main_box .form_block .pull_down:before {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 48px;
    background: #99c2ff;
    pointer-events: none;
    border-radius:0 3px 3px 0;
}
div.main_box .form_block .pull_down:after {
    position: absolute;
    top:0;
    right: 11px;/* ((水色の四角部分40px - アイコンのwidth18px)/2) */
    height:48px;
    width:18px;
    color:#ffffff;
    font-family:'Font Awesome 6 Pro';
	content: '\f107';
	font-size: 28px;
    pointer-events: none;
}
div.main_box .form_block .pull_down select {
    display: inline-block;
    width: 100%;
    padding:0px 7.5px;
    border: 2px solid #d8d8d8;
    border-radius: 3px;
    height: 48px;
    background:#fff;
    color:#000;
    font-size:15px;
}
/* フォーカス時に勝手につく枠線を削除 */
div.main_box .form_block .pull_down select:focus {
  outline: none;
}
/* 文字数のカウント */
div.main_box .txt_count{
	text-align:right;
	margin-top:5px;
}
/*--------------------------------------------------------
 ■ checkboxを包括するbox
--------------------------------------------------------*/
div.main_box .checkbox_devision_block{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	flex-wrap : wrap;
}
div.main_box .checkbox_devision_block .checkbox{
	width:calc(100%/2);
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items:center;
}
div.main_box .checkbox_devision_block.one_row .checkbox{
	width:100%;
}
@media only screen and (min-width: 738px){
	div.main_box .checkbox_devision_block .checkbox{
		width:calc(100%/4);
	}
	div.main_box .checkbox_devision_block.one_row .checkbox{
		width:calc(100%/2);
	}
}
div.main_box .form_block .blue_table th.day{
	width:50px;
}
div.main_box .form_block .blue_table tr.border_none{
	border-bottom:none;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 ■ 表示切替系
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/* ------------------------------------------------------
■ セレクトボックス
-------------------------------------------------------- */
.select_box{
	width: 200px;
	/* width:auto; */
	position: relative;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	.select_box{
		margin-bottom: var(--margin_bottom_ml);
	}
}

.select_box::after {
	content: '';
	width: 8px;
	height: 8px;
	border: 0px;
	border-bottom: solid 1px var(--color-gray);
	border-right: solid 1px var(--color-gray);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -6px;
	z-index: 1;
}
.select_box select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 40px;
	background: transparent;
	position: relative;
	z-index: 1; /*  重なりの順序を指定 */
	padding: 0 40px 0 10px;
	border: 1px solid var(--color-gray);
	background:var(--color-white);
	font-size:15px;
	cursor: pointer;
}
@media only screen and (min-width: 738px){
	.select_box select{
		font-size:16px;
	}
}
.select_box select::-ms-expand { /* select要素のデザインを無効にする */
    display: none;
}
/* --------------------------------------------------
■ タブ切り替えボタン
 -------------------------------------------------- */
div.main_box .tab_wrap_title{
	font-weight:bold;
	font-size:17px;
}
@media only screen and (min-width: 738px){
	div.main_box .tab_wrap_title{
		font-size:18px;
	}
}
div.main_box .tab_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}
 div.main_box .tab_wrap .tab_switch {
    display: none;
}
div.main_box .tab_btn_with_triangle {
    color: #5193f7;
    border: 1px solid #99c2ff;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    padding: 8px;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 10px;
}
div.main_box .tab_btn_with_triangle:last-of-type {
    margin-right: 0px;
}
div.main_box .tab_switch:checked+.tab_btn_with_triangle,
div.main_box .tab_btn_with_triangle:hover {
    background: #5193f7;
    color: #fff;
}
div.main_box .tab_switch:checked+.tab_btn_with_triangle:before,
div.main_box .tab_btn_with_triangle:hover:before {
    content: "";
    border: 10px solid transparent;
    border-top-color: #5193f7;
    display: block;
    left: 50%;
    bottom: 2px;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    position: absolute;
}
div.main_box .tab_content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
div.main_box .tab_switch:checked+.tab_btn_with_triangle+.tab_content {
    height: auto;
    padding: 20px 0px 0px 0px;
    opacity: 1;
    transition: .5s opacity;
}
/* --------------------------------------------------
■ タブ切り替えボタン（ボーダー）
 -------------------------------------------------- */
div.main_box .border_tab_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}
div.main_box .border_tab_wrap:after {
    content: '';
    width: calc(100% + 10px);
    margin:0 -5px;
    height: 2px;
    background: #5193f7;
    display: block;
    order: -1;
}
@media only screen and (min-width: 738px){
	div.main_box .border_tab_wrap:after {
	    width: 100%;
	    margin:0;
	}
}
 div.main_box .border_tab_wrap .border_tab_switch {
    display: none;
}
div.main_box .border_tab_btn {
    color: #5193f7;
    border: 2px solid #5193f7;
    border-bottom:none;
    font-weight: bold;
    font-size:14px;
    white-space: nowrap;
    text-align: center;
    padding: 8px;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 5px;
}
@media only screen and (min-width: 738px){
	div.main_box .border_tab_btn {
		font-size:15px;
		margin-right: 10px;
	}
}
div.main_box .border_tab_btn:last-of-type {
    margin-right: 0px;
}
@media only screen and (min-width: 738px){
	div.main_box .border_tab_btn:first-of-type {
		margin-left:10px;
	}
	div.main_box .border_tab_btn:last-of-type {
		margin-right:10px;
	}
}
div.main_box .border_tab_switch:checked+.border_tab_btn,
div.main_box .border_tab_btn:hover {
    background: #5193f7;
    color: #fff;
}
div.main_box .border_tab_switch:disabled+.border_tab_btn{
	cursor:default:
}
div.main_box .border_tab_switch:disabled+.border_tab_btn:hover{
    color: #5193f7;
    background:#fff;
}
div.main_box .border_tab_content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
div.main_box .border_tab_switch:checked+.border_tab_btn+.border_tab_content {
    height: auto;
    padding: 20px 0px 0px 0px;
    opacity: 1;
    transition: .5s opacity;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 ■ button
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*--------------------------------------------------------
■ 大ボタン
--------------------------------------------------------*/
.filled_button {
	font-size:16px;
	font-weight:bold;
	display: inline-block;
	min-width:250px;
	text-align: center;
	padding:15px;
	outline: none;
	color: var(--color-white);               /* 通常は白文字 */
	background-color: var(--color-accent-gold); /* 通常はゴールド背景 */
	position: relative;
	border: 1px solid transparent;           /* 通常はボーダーなし（透明） */
	cursor: pointer;
	overflow: hidden;
	font-weight: bold;
	transition: color 0.5s ease, background-color 0.5s ease;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	.filled_button{
		font-size:18px;
		margin-bottom: var(--margin_bottom_ml)
	}
}
.filled_button::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--color-white);      /* ホバー時の白背景の流れる部分 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 0;
  border: 1px solid var(--color-accent-gold);
  box-sizing: border-box;
  pointer-events: none;
}

.filled_button:hover::before {
  transform: scaleX(1);
}

.filled_button:hover {
  color: var(--color-accent-gold);   /* 文字がゴールドに */
  background-color: var(--color-white);  /* 背景が白に */
  border-color: var(--color-accent-gold); /* ボーダーがゴールドに */
}

.filled_button .text {
  position: relative;
  z-index: 1;
}

.filled_button:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}
/* 横並びボタン */
div.main_box .two_btn button.big_border_btn{
	margin-right:auto;
	margin-left:auto;
	display:block;
}
@media only screen and (min-width: 738px){
	div.main_box .two_btn{
		margin-bottom: var(--margin_bottom_ml)
	}
	div.main_box .two_btn button.big_border_btn{
		margin: 0 10px;/* 上下両方に0px、左右両方に10pxのCSS */
		display:inline-block;
	}
}
/*--------------------------------------------------------
■ サブボタン
--------------------------------------------------------*/
.line_button {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  min-width: 250px;
  text-align: center;
  padding: 15px;
  outline: none;
  color: var(--color-accent-gold);               /* 初期文字色：ゴールド */
  background-color: transparent;                 /* 背景なし */
  border: 1px solid var(--color-accent-gold);    /* 線もゴールド */
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease;
  margin-bottom: var(--margin_bottom_s);
}

@media only screen and (min-width: 738px) {
  .line_button {
    font-size: 18px;
    margin-bottom: var(--margin_bottom_ml);
  }
}

.line_button:hover {
  color: var(--color-brown-dark);               /* ホバー時：ネイビー文字 */
  border-color: var(--color-brown-dark);        /* ホバー時：ネイビー線 */
}

.line_button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/*--------------------------------------------------------
■ カード風ラジオボタン
--------------------------------------------------------*/

div.main_box div.card_radio_btn{
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.card_radio_btn{
		margin-bottom: var(--margin_bottom_ml);;
	}
}

div.main_box .card_radio_btn label {
	width:100%;
	max-width:500px;
    padding: 15px 15px 15px 40px; /* radioボタンと文字の間隔を取るため左paddingを大きく取る */
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    cursor: pointer;
   	margin-left: 0px;
   	margin-bottom: 15px;
}
div.main_box .card_radio_btn .radio:last-of-type label{
	margin-bottom:0px;
}
div.main_box .card_radio_btn label:before{
	left: 10px;/* ラベルの中にラジオボタンを入れる */
}
div.main_box .card_radio_btn input[type="radio"]:checked + label:after { /* ラジオボタンの色を変える */
	left: 16px;/* ラジオボタンの真ん中に青い点が入るように位置調整*/
}
div.main_box .card_radio_btn input[type=radio]:checked + label{
 background-color:#e8f1ff;/* クリック時にラベルの背景色を変える */
}
div.main_box .card_radio_btn input[type=radio]:disabled + label{
    border: 1px solid #f0f0f0;
	color: #c0c0c0;
}
/*--------------------------------------------------------
■ ボタングループ（PC版のみ使用）
-------------------------------------------------------- */
div.main_box .only_pc_btn_group{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .only_pc_btn_group{
	  	display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
	    gap: 12px;/* ボタンとボタンの間を開ける */
		padding:8px 12px;
		z-index:1;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner{
		display:-webkit-box;
	  	display:-ms-flexbox;
	  	display:flex;
		align-items:center;
		justify-content:center;
		width:200px;
		height:50px;
		border-radius:5px;
		font-weight:bold;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.main{
		background:#dddddd;
		color:#fff;
		pointer-events:none;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.detail{
		background:#fff;
		color:#c0c0c0;
		border:1px #c0c0c0 solid;
		pointer-events:none;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.main.active{
		background:#5193f7;
		color:#fff;
		pointer-events: auto;
		cursor: pointer;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.detail.active{
		background:#fff;
		color:#606060;
		border:1px #c0c0c0 solid;
		pointer-events: auto;
		cursor: pointer;
	}
}
/*--------------------------------------------------------
■ 下部フィックスボタン
--------------------------------------------------------*/
div.main_box .bottom_fixed_btn_box{
  	display:none;/* デフォルトは非表示 */
	align-items:center;
	justify-content:center;
	width:100%;
	background-color: rgba(51, 51, 51, 0.7);/* 背景を黒半透明にする */
    gap: 12px;/* ボタンとボタンの間を開ける */
	position:fixed;
	left:0;
	bottom:0;
	padding:8px 12px;
	z-index:102;
}
@media only screen and (min-width: 738px){
	div.main_box .bottom_fixed_btn_box{
		gap: 20px;/* ボタンとボタンの間を開ける */
	}
}
div.main_box .bottom_fixed_btn_box.active{/* activeクラスのある時には表示させる */
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn{
	flex: 1 1 0%;
}
@media only screen and (min-width: 738px){
	div.main_box .bottom_fixed_btn_box .bottom_fixed_btn{
		flex:initial;
	}
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:50px;
	border-radius:5px;
	font-weight:bold;
}
@media only screen and (min-width: 738px){
	div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner{
		width:250px;
	}
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner.main{
	background:#5193f7;
	color:#fff;
	cursor: pointer;
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner.main.incomplete{
	background:#f45079;
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner.detail{
	background:#fff;
	color:#606060;
	cursor: pointer;
}

div.main_box .bottom_fixed_btn_box .bottom_fixed_overlay {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;               /* 親いっぱいに広げる */
  height: 100%;
  background: #ea9c2e;
  color: #fff;
  
  /* フォントサイズを最小14px・最大18px・中間は2.5vwで調整 */
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 600;
  
  /* 中央揃え＋自動折返し */
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* 横の余白を固定 */
  padding: 0 16px;
  box-sizing: border-box;
  
  /* アニメーション設定 */
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  z-index: 999;
  pointer-events: all;
}

div.main_box .bottom_fixed_btn_box .bottom_fixed_overlay.active {
  transform: translateY(0);
}

/* 市区群の選択ボタン */
div.main_box .return_btn{
	font-weight:bold;
	cursor:pointer;
}
@media only screen and (min-width: 738px){
	div.main_box .return_btn{
		display:none;/* PC版では非表示 */
	}
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 ■ table
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
table{
	width: 100%;
	border:1px solid var(--color-gray);
	padding:0px 5px;
	margin-bottom: var(--margin_bottom_s);
	border-collapse: collapse;
}
table tr{
	border-bottom:1px solid #dddddd;
}
@media only screen and (min-width: 738px){
	table{
		margin-bottom: var(--margin_bottom_ml);;
	}
}
table th{
	padding:9px;
	font-weight:bold;
	text-align:center;
	color:#505050;
	border:none;
}
table.beige_table th{
	background:var(--color-beige);
}

 table th{
	border:1px solid var(--color-gray);
 }
@media only screen and (min-width: 738px){
	table th{
		padding:12px;
	}
}
table td{
	border:1px solid var(--color-gray);
	padding:9px;
	background: var(--color-white);
}
@media only screen and (min-width: 738px){
	table td{
		padding:12px;
	}
}

/* 以下、スカイプ名等の単語区切りが不明なものを強制的に折り返すためのCSS */
/* ここから～ */
table{/* 各セルのwidthを以下に指定する通りに */
	table-layout: fixed;
}
table th.break_word,
table td.break_word{/* 単語区切りが不明なものを強制的に折り返す */
	overflow-wrap : break-word;
}
/* ～ここまで */

/* スクロール可能なテーブル */
.scrollable_table_block{
	position:relative;
}
.scrollable_table_wrap{
	overflow-x: scroll;
	overflow-y: visible;
}
.scrollable_table_block .scrollable_icon::before{
	position:absolute;
	right:12px;
	top:-12px;
	z-index: 10;
	animation: scrollAnimation 1.5s ease-in-out infinite;/* 左右に揺れるアニメーション */
	font-family:'Font Awesome 6 Pro';
	content: '\e1a2';
	color:var(--color-brown-dark);
	font-weight:900;
	font-size:20px;
}
/* アニメーションの設定 */
@keyframes scrollAnimation {
    0% {
        transform: translateX(0); /* 左端 */
    }
    50% {
        transform: translateX(10px); /* 右に動かす */
    }
    100% {
        transform: translateX(0); /* 元の位置に戻る */
    }
}
.scrollable_table_block .scrollable_icon img{
	width:100%;
	margin-bottom:0px;
}
.scrollable_table_wrap table{
	margin-bottom:0px;
	min-width: max-content;
	width: auto; /* 自動調整 */
	table-layout: fixed;
	border-collapse: separate;/* タイトルをstickyにしているので、separateにしないとborderが消えてしまう */
	border-spacing: 0px;/* 隙間をなくす */
	padding:0px;
	border-right: 1px solid #dddddd;
}
.scrollable_table_wrap table.scrollable_table tr > :first-child{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
}
/* 他のセル（tdやth）のスタイル */
.scrollable_table_wrap table.scrollable_table tr > th,
.scrollable_table_wrap table.scrollable_table tr > td {
    z-index: -1;  /* 背面に表示 */
}
.scrollable_table_wrap table.scrollable_table td,
.scrollable_table_wrap table.scrollable_table th{
	max-width: 1000px;
	min-width: 100px;
	border-top:none;/* tableのseparateの影響で隣通しの線がくっついて表示されるのでここではborder-topはなくす */
	border-right:none;
}
.scrollable_table_wrap td.table_icon_double_circle {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="none" stroke="%23f6dddd" stroke-width="2"/><circle cx="12" cy="12" r="6" fill="none" stroke="%23f6dddd" stroke-width="2"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	background-size: 60px;
	padding: 10px;
}
.scrollable_table_wrap td.table_icon_circle {
	background-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\<circle cx="12" cy="12" r="10" fill="none" stroke="%23e8f1ff" stroke-width="2"/>\</svg>');

	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px;
	padding: 10px;
}
.scrollable_table_wrap td.table_icon_triangle {
	background-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\<polygon points="12,4 4,20 20,20" fill="none" stroke="%23e5fff3" stroke-width="2"/>\</svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px;
	padding: 10px;
}
.scrollable_table_wrap table.scrollable_table td .link_btn{
	display: inline-block;
	background:var(--color-accent-gold);
	cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
	color:#fff;
	font-weight: bold;
}
/*--------------------------------------------------------
■ confirm_edit_table
--------------------------------------------------------*/
table.confirm_edit_table th{
	background:#e8f1ff;
}
/*
	↑のtdにて登録されていたwidthを↓のcolタグに移動。
	理由は最初のレコード（お名前）tdにcolspan=2を設定した際にwidthプロパティが効かなくなるため。
	この理由はテーブルタグにtable-layout: fixed;が設定されているから、だが、
	table-layout: fixed;は単語強制折返しに必要なプロパティなので削除できない。
	よって、colタグを使い、最初のレコード（お名前）、の前の段階で、各tdのwidthを固定させる。
*/
table.confirm_edit_table col.title{
	width:25%;
}
@media only screen and (min-width: 738px){
	table.confirm_edit_table col.title{
		width:22%;
	}
}
table.confirm_edit_table col.value{
	width:60%;
}
table.confirm_edit_table td.detail{
	width:15%;
	text-align: center;
}
@media only screen and (min-width: 738px){
	table.confirm_edit_table td.detail{
		width:18%;
	}
}
/* 以下、スカイプ名等の単語区切りが不明なものを強制的に折り返すためのCSS */
/* ここから～ */
table.confirm_edit_table{/* 各セルのwidthを以下に指定する通りに */
	table-layout: fixed;
}
table.confirm_edit_table th.break_word,
table.confirm_edit_table td.break_word{/* 単語区切りが不明なものを強制的に折り返す */
	overflow-wrap : break-word;
}
/* ～ここまで */

/*--------------------------------------------------------
各td内の共通
--------------------------------------------------------*/

table.confirm_edit_table td input.save_button{
	cursor:pointer;
	margin-top:9px;
	padding:1.5px 7.5px;
	border-radius:3.75px;
	font-size:16px;
	background-color:#5193f7;
	border:1px solid #5193f7;
	color:#ffffff;
	-webkit-appearance: none;
	height:40px;
}
@media only screen and (min-width: 738px){
	table.confirm_edit_table td input.save_button{
	margin-top:12px;
	padding:2px 10px;
	border-radius:5px;
	}
}
table.confirm_edit_table td input.cancel_button{
	cursor:pointer;
	margin-top:9px;
	margin-left:9px;
	padding:1.5px 7.5px;
	background-color:#ffffff;
	border:1px solid #5193f7;
	color:#5193f7;
	border-radius:3.75px;
	font-size:16px;
	-webkit-appearance: none;
	height:40px;
}
@media only screen and (min-width: 738px){
	table.confirm_edit_table td input.cancel_button{
		margin-top:12px;
		margin-left:12px;
		padding:2px 10px;
		border-radius:5px;
	}
}
table.confirm_edit_table td input.delete_button{
	cursor:pointer;
	margin-top:9px;
	margin-left:9px;
	padding:1.5px 7.5px;
	background-color:#ffffff;
	border:1px solid #5193f7;
	color:#5193f7;
	border-radius:3.75px;
	font-size:16px;
	-webkit-appearance: none;
	height:40px;
}
@media only screen and (min-width: 738px){
	table.confirm_edit_table td input.delete_button{
		margin-top:12px;
		margin-left:12px;
		padding:2px 10px;
		border-radius:5px;
	}
}

table.confirm_edit_table span.public{
	color:#eb2f5d;
}
table.confirm_edit_table span.private{
	color:#2a77eb ;
}
table.confirm_edit_table td.detail a.edit{
	cursor:pointer;
}
table.confirm_edit_table hr.main{
	border: 0;
	border-top: 1px solid #dddddd;
	background: #ffffff;
	margin-top: 10px;
	margin-bottom: 10px;
}
table.confirm_edit_table hr.sub{
	border: 0;
	border-top: 1px dashed #dddddd;
	background: #ffffff;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*--------------------------------------------------------
テキストボックス
--------------------------------------------------------*/

div.main_box  table.confirm_edit_table input[type="text"],
div.main_box  table.confirm_edit_table input[type="email"],
div.main_box  table.confirm_edit_table input[type="password"]{
	border:  1px solid #d8d8d8;
	padding:0px 7.5px;
	height: 30px;
}
@media only screen and (min-width: 738px){
	div.main_box  table.confirm_edit_table input[type="text"],
	div.main_box  table.confirm_edit_table input[type="email"],
	div.main_box  table.confirm_edit_table input[type="password"]{
		height: 40px;
		padding: 0px 10px;
	}
}
/*--------------------------------------------------------
ボタンの下部のエラーメッセージ
--------------------------------------------------------*/

table.confirm_edit_table div.comment{
	margin-top:9px;
	margin-bottom:0px;/*テーブルセルのパディングがあるので消す */
}
table.confirm_edit_table div.comment.success{
	font-weight: bold;
	color: #25ae78;
}
/*--------------------------------------------------------
各項目の詳細
--------------------------------------------------------*/

table.confirm_edit_table td div.card_element_outer_box{
	padding: 8px 0px 8px 0px;
}
/*--------------------------------------------------------
アカウント削除系の色合い変更（分かりやすいのでアカウント削除のみ別にまとめる）
--------------------------------------------------------*/

div.main_box h2.red:before{
	background: #ff99b3;
}

table.confirm_edit_table th.red{
	background:#ffe8ed;
}

table.confirm_edit_table td input.save_button.red{
	background-color:#f45079;
	border:1px solid #f45079;
}
table.confirm_edit_table td input.cancel_button.red{
	border:1px solid #f45079;
	color:#f45079;
}
input.red[type="text"],
input.red[type="password"]{/* textボックスにのみ対応するスタイル */
	background-color: #ffe8ed;
}
/*--------------------------------------------------------
■ テーブルの下部のエラーメッセージ
--------------------------------------------------------*/
table + div.comment.error.table_bottom{
	margin-top:-5px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	table + div.comment.error.table_bottom{
		margin-top:-10px;
		margin-bottom: var(--margin_bottom_ml)
	}
}
/*--------------------------------------------------------
	■ ラジオボタン付き、列ごと選択できる表
【JASRAC管理曲登録入力】で使用
--------------------------------------------------------*/
div.main_box div.scroll_box {
    position: relative;
    margin:0px;
    overflow-x: auto;
    white-space: nowrap;
}
@media only screen and (min-width: 738px){
	div.main_box div.scroll_box {
	    overflow-x:visible;
	    white-space:normal;
	}
}
div.main_box .can_select_row_box {
	width:100%;
}
div.main_box .can_select_row_box .can_select_row_item{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	width:100%;
  	min-width:416px;
  	justify-content: center;
  	border-bottom:1px solid#dddddd;
  	cursor: pointer !important;
}
@media only screen and (min-width: 738px){
	div.main_box .can_select_row_box .can_select_row_item{
	    width:100%;
	}
}
div.main_box .can_select_row_box .can_select_row_item.selected{
	background:#e8f1ff;
}
div.main_box .can_select_row_box .can_select_row_item.header{
	font-weight:bold;
}
div.main_box .can_select_row_box .can_select_row_elm{
	padding:8px;
	over-flow:hidden;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	max-height:68px;
	height:68px;
	cursor: pointer !important;
	white-space:normal;/* 行を折り返す */
}
div.main_box .can_select_row_box .can_select_row_elm span{
	 display: -webkit-box;/* Flexboxの状態にするプロパティ。 */
	-webkit-line-clamp: 2;/* 行数を指定（2行） */
	-webkit-box-orient: vertical;/* Flexbox の要素方向を設定するプロパティ。 */
	overflow: hidden;
}
@media only screen and (min-width: 738px){
	div.main_box .can_select_row_box .can_select_row_elm{
		padding:12px;
	}
}
div.main_box .can_select_row_box .elm_1{
	flex-basis:8%;
	min-width:36px;
}
div.main_box .can_select_row_box .elm_2{
	flex-basis:32%;
	min-width:140px;
}
div.main_box .can_select_row_box .elm_3{
	flex-basis:30%;
	min-width:120px;
}
div.main_box .can_select_row_box .elm_4{
	flex-basis:30%;
	min-width:120px;
}
div.main_box .can_select_row_box .radio{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
div.main_box .can_select_row_box .can_select_row_elm label{
	padding:0px;
	margin:0px;
}
/*--------------------------------------------------------
	■ 横スクロール可能テーブル
--------------------------------------------------------*/
div.main_box 
/*--------------------------------------------------------
■ ページャー
--------------------------------------------------------*/
div.main_box div#pager ul.pagination {
	text-align: center;
	margin-left: 0px;
	letter-spacing: -.4em;
	height:40px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div#pager ul.pagination {
		margin-bottom: var(--margin_bottom_ml)
	}
}
div.main_box div#pager ul.pagination.bottom {
	text-align: center;
	margin-top:15px;
}
@media only screen and (min-width: 738px){
	div.main_box div#pager ul.pagination.bottom {
		margin-bottom: var(--margin_bottom_ml)
	}
}
div.main_box div#pager ul.pagination li{
	display: none;
}
div.main_box div#pager ul.pagination li.prev,
div.main_box div#pager ul.pagination li.next{
	padding: 0;
	position: relative;
	border-radius: 10px;
	background:#fff;
	border: 1px solid #5193f7;
	display: inline-block;
	width: 40%;
	height: 40px;
	text-align: center;
	margin: 0;
	letter-spacing:normal;
}
div.main_box div#pager ul.pagination li.prev{
	margin-right: 10px;
}
div.main_box div#pager ul.pagination li.next{
	margin-left: 10px;
}
div.main_box div#pager ul.pagination li.prev a,
div.main_box div#pager ul.pagination li.next a{
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display:table;
	color: #5193f7;
	text-decoration: none;
	width: 100%;
	text-align: center;
}
div.main_box div#pager ul.pagination li.prev span.prev_txt::after{
	content: "　前の10件へ";
}
div.main_box div#pager ul.pagination li.next span.next_txt::before{
	content: "次の10件へ　";
}
div.main_box div#pager ul.pagination li.disabled{
    opacity:0.4;
    pointer-events:none;
}
div.main_box div#pager ul.pagination li a span{
	display:table-cell;
	vertical-align:middle;
}
@media only screen and (min-width: 738px){
	div.main_box div#pager ul.pagination {
		text-align: right;
	}
	div.main_box div#pager ul.pagination li{
		padding: 0;
		position: relative;
		border-radius: 10px;
		background:#fff;
		border: 1px solid #5193f7;
		display: inline-block;
		width: 40px;
		height: 40px;
		text-align: center;
		margin: 0 5px;
		font-size:18px;
		letter-spacing:normal;
	}
	div.main_box div#pager ul.pagination li.prev,
	div.main_box div#pager ul.pagination li.next{
		width: 40px;
		height: 40px;
	}
	div.main_box div#pager ul.pagination li.prev{
		margin-right: 5px;
	}
	div.main_box div#pager ul.pagination li.next{
		margin-left: 5px;
	}
	div.main_box div#pager ul.pagination li.selected{
		background-color:#5193f7;
		pointer-events:none;
	}
	div.main_box div#pager ul.pagination li a{
		vertical-align: middle;
		position: absolute;
		top: -2px;
		left: 0;
		height: 100%;
		display:table;
		color: #5193f7;
		text-decoration: none;
		width: 100%;
		text-align: center;
	}
	div.main_box div#pager ul.pagination li.selected a{
		font-weight: bold;
		color:#fff;
	}
	div.main_box div#pager ul.pagination li.prev a,
	div.main_box div#pager ul.pagination li.next a{
		width: 100%;
		height: 100%;
		position: absolute;
		top: -2px;
		left: 0;
	}
	div.main_box div#pager ul.pagination li a span{
		height:40px;
		line-height:40px;
	}
	div.main_box div#pager ul.pagination li.prev span.prev_txt::after{
		content: "";
	}
	div.main_box div#pager ul.pagination li.next span.next_txt::before{
		content: "";
	}
}
/* --------------------------------------------------
■ レートチャート
 -------------------------------------------------- */
div.main_box .rating_block .rating_item_main{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:0 15px;
	width:calc(100% - 30px);
	position:relative;
	height:25px;
}
div.main_box .rating_block .rating_item{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items:center;
  	height:30px;
}
div.main_box .rating_block .rating_label{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .rating_block .rating_item_main{
		width:calc(100% - 320px);
	}
	div.main_box .rating_block .rating_label{
	   	background:#e8f1ff;
	   	display:inline-block;
	   	padding:2px 4px;
	   	border-radius:5px;
	   	width:160px;
	   	text-align:center;
	   	font-size:14px;
	}
}
/* 横棒 */
div.main_box .rating_block .rating_item_main:after {
    position: absolute;
    top: 50%;
    z-index: 1;
    content: "";
    width: 100%;
    width: calc(100% - 24px);
    margin:-1px 12px 0 12px;
    height: 1px;
    display: inline-block;
    position: absolute;
    border-top: 2px solid #99c2ff;
}
/* 吹き出し */
div.main_box .rating_block .balloon_box {
   	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	justify-content: space-between;
  	margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box .rating_block .balloon_box {
	   	display:none;
	}
}
div.main_box .rating_block .balloon_box .balloon{
   background:#e8f1ff;
   border-radius:5px;
   padding:2px 4px;
   position:relative;
   font-size:14px;
}
/*  吹き出しの三角*/
div.main_box .rating_block .balloon_box .balloon:after{
    content: "";
    border: 10px solid transparent;
    border-top-color: #e8f1ff;
    display: block;
    bottom: 2px;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    position: absolute;
}
div.main_box .rating_block .balloon_box .balloon.left:after{
	left: 27px;
}
div.main_box .rating_block .balloon_box .balloon.right:after{
    right: 7px;/* -20px +   rating_item_mainのmargin-left15px + ○の半径4px*/
}
/* ○マーク */
div.main_box .rating_block .rating_item_main .circle{
	width:24px;
	height:24px;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
div.main_box .rating_block .rating_item_main .circle:before{
	background:#99c2ff;
	width:8px;
	height:8px;
	border-radius:50%;
	content:"";
}
/* 星マーク */
div.main_box .rating_block .rating_item_main .circle.star:after{
    color:#ea9c2e;
    font-family:'Font Awesome 6 Pro';
	content: '\f005';
	font-size: 22px;
	font-weight:900;
    z-index: 2;
    position:absolute;
}
/* --------------------------------------------------
■ カレンダー
 -------------------------------------------------- */
/*--------------------------------------------------------
カレンダー部分
--------------------------------------------------------*/
div.main_box div.select_date_box_head{
    padding: 8px 10px 8px 10px;
    border-radius:0;
    background: #5193f7;
    color: #fff;
    font-size:1.25em;
    display: block;
    margin:0 -5px;
}
div.main_box div.select_date_box_head i{
	margin-left:10px;
}
@media only screen and (min-width: 738px){
	div.main_box div.select_date_box_head{
		font-size:1.5em;
		border-radius: 10px 10px 0 0;
		margin:0px;
	}
}
div.main_box form#select_date_box{
	margin:0 -5px;
}
@media only screen and (min-width: 738px){
	div.main_box form#select_date_box{
		margin:0;
	}
}
div.main_box form#select_date_box ul{
    list-style:none;
    display:flex;
    margin:0px;
    flex-wrap: wrap;
}
div.main_box form#select_date_box ul.day_of_week{
    border-top: 1px solid #dddddd;
    background:#e8f1ff;
}
div.main_box form#select_date_box ul.day_of_week li{
	background:#e8f1ff;
}
div.main_box form#select_date_box li.dow.disabled{/* Day of the week  */
	opacity:1;
	font-weight:bold;
	color:#5193f7;
}
div.main_box form#select_date_box li{
	width:calc(100%/7);
	margin:0px;
	padding:0px;/* padding:8px; */
	text-align:center;
	background-color:#ffffff;
	border-collapse: collapse;
	cursor:pointer;
	border-right:1px solid #d8d8d8;
	border-bottom: 1px solid #dddddd;
}
div.main_box form#select_date_box li:last-of-type{
	border-right:none;
}
@media only screen and (min-width: 738px){
	div.main_box form#select_date_box li:first-of-type{/* 最初のliにborder追加 */
		border-left: 1px solid #dddddd;
	}
		div.main_box form#select_date_box li:last-of-type{/* 最初のliにborder追加 */
		border-right: 1px solid #dddddd;
	}
}
div.main_box form#select_date_box li.disabled{/* クリックできない日付を設定 */
    pointer-events:none;
    opacity:0.6;
}
div.main_box form#select_date_box li span{
	font-weight:bold;
	font-size:1.2em;/* font-size:1.2em; */
}
@media only screen and (min-width: 738px){
	div.main_box form#select_date_box li span{
		/* font-size:1.5em; */
	}
}
div.main_box form#select_date_box li span.date{
	display: inline-block;
	text-align:center;
}
div.main_box form#select_date_box li span.date i{
	margin-right:0px;
	color:#d8d8d8;
}
div.main_box form#select_date_box li a.select_day{
	color:#606060;
}
div.main_box form#select_date_box li.selected,
div.main_box form#select_date_box li:hover{
	background:#5193f7;
	text-align:center;
}
div.main_box form#select_date_box li.selected a.select_day,
div.main_box form#select_date_box li:hover a.select_day,
div.main_box form#select_date_box li.selected span.date i,
div.main_box form#select_date_box li:hover span.date i{
	color:#fff;
}
div.main_box form#select_date_box dl{
	display:flex;
	flex-wrap: wrap;
	margin-top:20px;
}
div.main_box form#select_date_box dd{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
div.main_box form#select_date_box dd input[type=checkbox]{
	display: none;/* checkboxの丸ポチをなくす */
}
div.main_box form#select_date_box dd label.checkbox_label{
	border:1px solid #5193f7;
	border-radius:10px;
	padding:12px 4px;
	display:block;
	float:left;
	width:31.3%;
	margin-right:1.5%;
	text-align:center;
	background-color:#fff;
	color:#5193f7;
	cursor :pointer;
}
div.main_box form#select_date_box dd label.checkbox_label.left{
	margin-left: 1.5%;
}
div.main_box form#select_date_box dd label.checkbox_label.second_record{
	margin-top: 5px;
}
 div.main_box form#select_date_box dd input[type=checkbox]:checked + label.checkbox_label{
 	 background-color:#5193f7;
 	 color:#fff;
}


/*=================================
■ column
=================================*/
/*--------------------------------------------------------
■ ヘッダー
--------------------------------------------------------*/
div.main_box.column h2.article{
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	color: #606060;
	line-height: 1.4;
	position: relative;
	padding: 6px 0 6px 20px;
}
@media only screen and (min-width: 738px){
	div.main_box.column h2.article{
		font-size: 22px;
		margin-top: 25px;
		margin-bottom: var(--margin_bottom_ml);;
	}
}
div.main_box.column h2.article:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
	width: 6px;
	height: 100%;
	background: #5193f7;
}
div.main_box.column .column_h2{
	background:#5193F7;
	border-radius:10px;
	color:#fff;
	padding:10px 10px 10px 25px;
    position:relative;
}
div.main_box.column .column_h2:before {
    content: "";
    position: absolute;
    top:0;
    left: 10px;
    border-radius: 5px;
    margin-top:10px;
    margin-bottom:10px;
    width: 5px;
    height: calc(100% - 20px);
    background: #fff;
}
div.main_box.column .column_h2 .column_subtitle{
    font-weight:normal;
    font-size:17px;
}
div.main_box.column  h3.column_h3{
	padding-bottom:5px;
	border-bottom:3px solid #5193F7;
}
div.main_box.column  h4.column_h4{
	position:relative;
	padding: 6px 0 6px 25px;
}
div.main_box.column  h4.column_h4:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
	width: 6px;
	height: 100%;
	background: #5193F7;
}
div.main_box.column  h5.column_h5{
	position:relative;
	padding: 6px 0 6px 25px;
}
div.main_box.column  h5.column_h5:before{
	border-radius:50%;
	width:18px;
	height:18px;
	top:50%;
	margin-top:-9px;
}
div.main_box.column  h4.article_heading{
	margin:0px;
	padding:0px;
	font-size:14px;
}
div.main_box.column  h4.article_heading:before{
	display:none;
}
div.main_box.column .article_link h4.article_heading{
	margin-bottom:5px;
}
/*--------------------------------------------------------
■ 出典
--------------------------------------------------------*/
div.main_box.column p.source{
	font-size:14px;
	color:#808080;
}
/*--------------------------------------------------------
■ 更新日
--------------------------------------------------------*/
.modified_date{
	display:block;
	font-size:13px;
	color: #606060;
	margin-bottom:var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	.modified_date{
		margin-bottom:var(--margin_bottom_ml);
}	
}
/*--------------------------------------------------------
■ アイキャッチ
--------------------------------------------------------*/
div.main_box.column .eyecatch{
    margin-bottom:25px;
}
div.main_box.column .eyecatch img{
	margin-bottom:0px;
}
/*--------------------------------------------------------
■ メインページのメイン記事
--------------------------------------------------------*/
div.main_box.column .article_card_block{
	cursor:pointer;
	transition: all .3s;
}
div.main_box.column .article_card_block .article_title{
	padding: 10px;
}
div.main_box.column .article_card_block .article_title h3{
	margin-top: 0px;
}
div.main_box.column .article_card_block p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 任意の行数を指定 */
}
div.main_box.column .eyechatch_link{
	width:100%;
	overflow:hidden;
	border-radius:10px;
	box-shadow: 0 1px 8px rgba(0,0,0,0.1);
	transition: all .3s;
}
div.main_box.column .eyechatch_link:hover{
     box-shadow: 0 1px 10px rgba(0,0,0,0.2), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.main_box.column .eyechatch_link img{
	margin-bottom:0px;
}
/*--------------------------------------------------------
■ 記事のカテゴリー
--------------------------------------------------------*/
div.main_box.column .article_category_block{
	display:flex;
	flex-wrap: wrap;
	gap:10px;
}
div.main_box.column .categories_link{
	background:#e8f1ff;
	font-weight:bold;
	padding:5px 10px;
	border-radius:5px;
	font-size:14px;
	color:#606060;
	cursor:pointer;
    -webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    -webkit-transition-property: border, background, color;
    transition-property: border, background, color;
}
div.main_box.column .categories_link:hover{
	background:#5193f7;
	color:#fff;
}
/*--------------------------------------------------------
■ 吹き出しのエリア
--------------------------------------------------------*/
.balloon_block{
	display:flex;
	gap:10px;
	align-items: flex-start;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	.balloon_block{
		margin-bottom: var(--margin_bottom_ml);
	}
}
.balloon_block .balloon {
    width:calc(100% - 75px);
    background:var(--color-pastel-blue);
    border-radius:10px;
    padding:8px 12px;
	padding: 7px 10px 0 10px;
    position:relative;
	color:#202020;
}
@media only screen and (min-width: 738px){
	.balloon_block .balloon {
		padding:11px 15px 0 15px;/* padding-topはタイトルのline-heightの影響で文字の上には4pxの余白があるため、(取りたい余白15px)-4px=11pxとした */
	}	
}
.balloon_block.writer .balloon {
	background:var(--color-beige);
}
.balloon_block .balloon:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border: 10px solid transparent;
	border-left: 10px solid var(--color-pastel-blue);
}
.balloon_block.writer .balloon:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	margin-top: -10px;
	border: 10px solid transparent;
	border-right: 10px solid var(--color-beige);
}
.balloon_block .balloon p{
	margin-bottom:0px;
	margin-bottom:8px;
}
.balloon_block .balloon ul{
	margin-bottom: 8px;/* 取りたい余白は10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
	margin-top:5px;
}
.balloon_block .icon img{
    width:75px;
    margin-bottom:0px;
}
/*--------------------------------------------------------
■ あわせて読みたいブロック
--------------------------------------------------------*/
div.main_box.column .recommended_article_link_block{
	margin:50px 0px 15px 0px;
	position:relative;
	border:solid 2px #99C2FF;
	border-radius:10px;
	display:flex;
	align-items: center;
	padding:5px;
	gap:10px;
    box-shadow: 0 1px 7px rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1) ;
    transform: translateY(-2px);
    cursor:pointer;
    transition: all .3s;
}
div.main_box.column .recommended_article_link_block:hover{
	box-shadow: 0 1px 10px rgba(0,0,0,0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.main_box.column .recommended_article_link_block .recommended_article_title{
	position:absolute;
	top: -2em;
}
div.main_box.column .recommended_article_link_block .recommended_article_title i{
	color:#5193F7;
}
div.main_box.column .recommended_article_link_block img{
	max-width:175px;
	margin-bottom:0px;
	border-radius:5px;
}
/*--------------------------------------------------------
■ この記事を書いた人
--------------------------------------------------------*/
div.main_box.column .writer_box{
	margin:50px 0px 15px 0px;
	position:relative;
	border:solid 2px #99C2FF;
	border-radius:10px;
	display:flex;
	align-items: center;
	padding:25px 10px 10px 10px;
	gap:10px;
	margin-bottom:var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box.column .writer_box{
		margin-bottom:var(--margin_bottom_ml);
	}
}
div.main_box.column  .writer_box .writer_box_title{
	position:absolute;
	top: -1em;
	background:#99c2ff;
	border-radius:20px;
	color:#fff;
	padding:3px 10px;
}
div.main_box.column .writer_box img{
	max-width:80px;
	margin-bottom:0px;
}
div.main_box.column .writer_box .profile_block{
	display:flex;
	 flex-direction: column;
}
div.main_box.column .writer_box .profile_block .writer_name{
	margin-bottom:5px;
}
/*--------------------------------------------------------
■ 関連記事（コンテンツではなくカテゴリで使用）
--------------------------------------------------------*/
/* マテリアルデザイン */
div.main_box.column .article_block{
	display:flex;
	gap:30px;
	flex-wrap: wrap;
	margin-bottom:50px;
}
div.main_box.column .article_block .article_item{
	width:100%;
	display:flex;
	flex-direction: column;
	position:relative;
	overflow:hidden;
	box-shadow: 0 1px 8px rgba(0,0,0,0.1);
	border-radius: 8px;
    transition: all .3s;
}
@media only screen and (min-width: 738px){
	div.main_box.column .article_block .article_item{
		width:calc((100% - 30px)/2);
	}
}
div.main_box.column .article_block .article_item:hover{
     box-shadow: 0 1px 10px rgba(0,0,0,0.2), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.main_box.column .article_block .article_item img{
	width:100%;
	margin-bottom:0px;
}
div.main_box.column .article_block .article_item .article_title{
	padding: 10px;
}

/*=================================
■ ptnr（developerでも利用）
=================================*/

/*--------------------------------------------------------
■ 講座一覧（スマホ版）
--------------------------------------------------------*/
div.main_box .lecture_list{
	width:calc(100% + 10px);
	display:flex;
	flex-direction: column;
	gap:15px;
	background:#f3f3f3;
	margin-right:-5px;
	margin-left:-5px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_list{
	   display:none;
	}
}
div.main_box .lecture_list .lecture_link{
	color:#606060;
}
div.main_box .lecture_list .lecture_item{
	width:100%;
	display:flex;
	align-items: center;
	flex-direction: column;
	background: #ffffff;
	cursor:pointer;
}
div.main_box .lecture_list .lecture_item .video_frame{
	width:100%;
	position:relative;
}
div.main_box .lecture_list .lecture_item .video_frame video{
	width:100%;
	vertical-align: top;
}
div.main_box .lecture_list .lecture_item .video_frame .mute_button {
	position: absolute;
	top: 10px; /* 適切な位置に調整してください */
	right: 10px; /* 適切な位置に調整してください */
	opacity: 0;
	transition: opacity 0.3s ease; /* 変化を滑らかにするトランジション */
}
div.main_box .lecture_list .lecture_item:hover .video_frame .mute_button {
	/* opacity: 1; */
}
div.main_box .lecture_list .lecture_item .video_frame .mute_toggle {
	cursor: pointer;
	background-color: #333;
	background-color: rgba(51, 51, 51, 0.8);
	width:40px;
	height:40px;
	border-radius:50%;
	 border: none;
	 font-size: 16px;
	 transition: color 0.3s;
}
div.main_box .lecture_list .lecture_item .video_frame i{
	color:#fff;
	margin:0px;
}
div.main_box .lecture_list .lecture_item .lecture_content{
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 10px 10px 10px 10px;
}
div.main_box .lecture_list .lecture_item .lecture_date{
	margin-bottom:8px;
	display:flex;
	flex-wrap: wrap;/* 折り返す */
	gap:10px;
}
div.main_box .lecture_list .lecture_item .lecture_status{
	border-radius:7px;
	font-weight:bold;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_list .lecture_item .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_list .lecture_item .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_list .lecture_item .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
}
div.main_box .lecture_list .lecture_item .lecture_title{
	font-size:16px;
	font-weight:bold;
	color:#303030;
	margin-bottom:4px;
	margin-top:0;
}
div.main_box .lecture_list .lecture_item .lecture_teacher{
	display:flex;
	align-items: center;
	gap:10px;
	margin-bottom:8px;
	font-size:14px;
}
div.main_box .lecture_list .lecture_item .lecture_teacher img{
	width:38px;
	margin-bottom:0px;
}
div.main_box .lecture_list .lecture_item .toc{
	margin-bottom:12px;
}
div.main_box .lecture_list .lecture_item .toc span{
	font-size:14px;
    display: -webkit-box;           /* 使うブラウザのベンダープレフィックス */
    -webkit-line-clamp: 3;          /* 行数を指定 */
    -webkit-box-orient: vertical;   /* 縦のボックスを指定 */
    overflow: hidden;               /* ボックスからはみ出した部分を非表示にする */
    text-overflow: ellipsis;        /* 「・・・」を表示する */
}
div.main_box .lecture_list .lecture_item .toc ul{
	list-style: none;
	margin-left: 30px;
	margin-bottom:0px;
}
div.main_box .lecture_list .lecture_item .toc ul li{
	position:relative;
	font-size:14px;
	line-height:1.5;
	padding:3px 0;
	font-style: italic;
}
div.main_box .lecture_list .lecture_item .toc ul li::before {
	position: absolute;
	left: -20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: #5193f7;
	content: '\f00c';
}
div.main_box .lecture_list .lecture_item .toc i{
	color:#5193f7;
}
div.main_box .lecture_list .lecture_item .toc p{
	margin-bottom:2px;
	font-size:14px;
}
div.main_box .lecture_list .lecture_item .tag_group{
	display:flex;
	align-items: center;
	gap:6px;
	margin-bottom:4px;
	flex-wrap: wrap;/* 折り返す */
}
div.main_box .lecture_list .lecture_item .tag_group .tag{
	background:#e8f1ff;
	border-radius:7px;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_list .lecture_item .tag_group .tag.is_recommended_first_lecture{
	background:#fff0db;
	border:solid 1px #ea9c2e;
	color:#cc8828;
	font-weight: 500;
}
div.main_box .lecture_list .lecture_item .tag_group .tag.is_recommended_first_lecture i{
	color:#cc8828;
}
div.main_box .lecture_list .lecture_item .tag_group .tag i{
	margin-right:2px;
	font-weight:bold;
	color:#5193f7;
}
div.main_box .lecture_list .lecture_item .capacity_block{
	display: flex;
	justify-content: flex-end; /* 右寄せ */
	align-items: end;
}
div.main_box .lecture_list .lecture_item .capacity_block span{
	margin-right:5px;
}
div.main_box .lecture_list .lecture_item .capacity_block .participants{
	color:#ea9c2e;
	font-size:26px;
	font-weight:bold;
	line-height:1.2;
}
/*--------------------------------------------------------
■ 講座一覧（PC版）
--------------------------------------------------------*/
div.main_box .lecture_list_pc{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_list_pc{
		display:flex;
	}
}
div.main_box .lecture_list_pc{
	width:100%;
	flex-direction: column;
	gap:15px;
}
div.main_box .lecture_list_pc .lecture_link{
	color:#606060;
}
div.main_box .lecture_list_pc .lecture_item{
	display:flex;
	flex-direction: column;
	gap:10px;
	padding-top:10px;
	position:relative;
	cursor:pointer;
}
div.main_box .lecture_list_pc .lecture_item:nth-child(n+2){
	border-top:3px solid #e9ecef;
}
div.main_box .lecture_list_pc .lecture_header{
	display:flex;
	flex-direction: column;
	border-bottom:3px dashed #e9ecef;
}
div.main_box .lecture_list_pc .lecture_header .lecture_title{
	font-size:18px;
	font-weight:bold;
	color:#303030;
	margin-bottom:0px;
	margin-top:0;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data{
	display:flex;
	 align-items: flex-end; /* 要素を下揃えに配置 */
	 margin-bottom:5px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .lecture_date{
	font-size:16px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status{
	background:#e8f1ff;
	border-radius:7px;
	font-weight:bold;
	margin-left:10px;
	padding:3px 5px;
	font-size:13px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .capacity_block{
	margin-left:auto;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .capacity_block span{
	margin-right:5px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .capacity_block .participants{
	color:#ea9c2e;
	font-size:26px;
	font-weight:bold;
	line-height:1.2;
}
div.main_box .lecture_list_pc .lecture_content{
	display:flex;
	gap:15px;
	align-items: flex-start;
}
div.main_box .lecture_list_pc .lecture_content .video_frame{
	border-radius:20px;
	overflow:hidden;
	width:42%;
	position:relative;
}
div.main_box .lecture_list_pc .lecture_content .video_frame video{
	width:100%;
	vertical-align: top;
}
div.main_box .lecture_list_pc .video_frame .mute_button {
	position: absolute;
	top: 10px; /* 適切な位置に調整してください */
	right: 10px; /* 適切な位置に調整してください */
	opacity: 0;
	transition: opacity 0.3s ease; /* 変化を滑らかにするトランジション */
}
div.main_box .lecture_list_pc .lecture_item:hover .video_frame .mute_button {
	opacity: 1;
}
div.main_box .lecture_list_pc .video_frame .mute_toggle {
	cursor: pointer;
	background-color: #333;
	background-color: rgba(51, 51, 51, 0.8);
	width:40px;
	height:40px;
	border-radius:50%;
	 border: none;
	 font-size: 16px;
	 transition: color 0.3s;
}
div.main_box .lecture_list_pc .video_frame .mute_toggle i{
	color:#fff;
	margin:0px;
}
div.main_box .lecture_list_pc .lecture_content .lecture_info{
	display:flex;
	flex-direction: column;
	gap:15px;
	width:58%;
}
div.main_box .lecture_list_pc .lecture_content .lecture_teacher{
	display:flex;
	align-items: center;
	gap:10px;
	/* margin-bottom:12px; */
	font-size:15px;
	margin-top:4px;
}
div.main_box .lecture_list_pc .lecture_content .lecture_teacher img{
	width:38px;
	margin-bottom:0px;
}
div.main_box .lecture_list_pc .lecture_content .toc span{
    font-size:14px;
    display: -webkit-box;           /* 使うブラウザのベンダープレフィックス */
    -webkit-line-clamp: 3;          /* 行数を指定 */
    -webkit-box-orient: vertical;   /* 縦のボックスを指定 */
    overflow: hidden;               /* ボックスからはみ出した部分を非表示にする */
    text-overflow: ellipsis;        /* 「・・・」を表示する */
}
div.main_box .lecture_list_pc .lecture_content ul{
	list-style: none;
	margin-left: 30px;
	margin-bottom:0px;
}
div.main_box .lecture_list_pc .lecture_content ul li{
	position:relative;
	font-size:14px;
	line-height:1.5;
	padding:3px 0;
	font-style: italic;
}
div.main_box .lecture_list_pc .lecture_content ul li::before {
	position: absolute;
	left: -20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: #5193f7;
	 content: '\f00c';
}
div.main_box .lecture_list_pc .lecture_content i{
	color:#5193f7;
}
div.main_box .lecture_list_pc .lecture_content .tag_group{
	display:flex;
	align-items: center;
	gap:6px;
	margin-bottom:4px;
	flex-wrap: wrap;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag{
	background:#e8f1ff;
	border-radius:7px;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag.is_recommended_first_lecture{
	background:#fff0db;
	border:solid 1px #ea9c2e;
	color:#cc8828;
	font-weight: 500;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag.is_recommended_first_lecture i{
	color:#cc8828;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag i{
	margin-right:2px;
	font-weight:bold;
}
/*--------------------------------------------------------
■ 講座詳細
--------------------------------------------------------*/
div.main_box .lecture_detail{
	width:calc(100% + 10px);
	display:flex;
	flex-direction: column;
	gap:15px;
	background:#f3f3f3;
	margin-right:-5px;
	margin-left:-5px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail{
		width:100%;
		margin-right:0px;
		margin-left:0px;
	}
}
div.main_box .lecture_detail .lecture_link{
	color:#606060;
}
div.main_box .lecture_detail .lecture_item{
	width:100%;
	display:flex;
	align-items: center;
	flex-direction: column;
	background: #ffffff;
}
div.main_box .lecture_detail .lecture_item .video_frame{
	width:100%;
	position:relative;
	margin-bottom:15px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .video_frame{
		border-radius: 20px;
    	overflow: hidden;
    	margin-bottom:20px;
	}
}
div.main_box .lecture_detail .lecture_item .video_frame video{
	width:100%;
	vertical-align: top;
}
div.main_box .lecture_detail .lecture_item .video_frame .mute_button {
	position: absolute;
	top: 10px; /* 適切な位置に調整してください */
	right: 10px; /* 適切な位置に調整してください */
	opacity: 1;
	transition: opacity 0.3s ease; /* 変化を滑らかにするトランジション */
}
div.main_box .lecture_detail .lecture_item:hover .video_frame .mute_button {
	/* opacity: 1; */
}
div.main_box .lecture_detail .lecture_item .video_frame .mute_toggle {
	cursor: pointer;
	background-color: #333;
	background-color: rgba(51, 51, 51, 0.8);
	width:40px;
	height:40px;
	border-radius:50%;
	 border: none;
	 font-size: 16px;
	 transition: color 0.3s;
}
div.main_box .lecture_detail .lecture_item .video_frame i{
	color:#fff;
	margin:0px;
}
div.main_box .lecture_detail .lecture_item .lecture_content{
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 0px 5px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .lecture_content{
		padding:0px;
	}
}
div.main_box .lecture_detail .lecture_data{
	display:flex;
	 align-items: flex-end; /* 要素を下揃えに配置 */
	 margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_data{
		 margin-bottom:15px;
	}
}
div.main_box .lecture_detail .lecture_data .lecture_date{
	font-size:16px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_data .lecture_date{
		font-size:18px;
	}
}
div.main_box .lecture_detail .lecture_status{
	background:#e8f1ff;
	border-radius:7px;
	font-weight:bold;
	margin-left:10px;
	padding:3px 5px;
	font-size:13px;
}
div.main_box .lecture_detail .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_detail .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_detail .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
}
div.main_box .lecture_detail .lecture_data .capacity_block{
	margin-left:auto;
}
div.main_box .lecture_detail .lecture_data .capacity_block span{
	/* margin-right:5px; */
}
div.main_box .lecture_detail .lecture_data .capacity_block .participants{
	color:#ea9c2e;
	font-size:26px;
	font-weight:bold;
	line-height:1.2;
}
/* div.main_box .lecture_detail .lecture_item .lecture_date{
	margin-bottom:8px;
	display:flex;
	flex-wrap: wrap;折り返す
	gap:10px;
	display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}
div.main_box .lecture_detail .lecture_item .lecture_status{
	border-radius:7px;
	font-weight:bold;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_detail .lecture_item .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_detail .lecture_item .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_detail .lecture_item .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
} */
div.main_box .lecture_detail .lecture_item .lecture_title{
	font-size:16px;
	font-weight:bold;
	color:#303030;
	margin-bottom:4px;
	margin-top:0;
}
div.main_box .lecture_detail .lecture_item .lecture_teacher{
	display:flex;
	align-items: center;
	gap:10px;
	margin-bottom:8px;
}
div.main_box .lecture_detail .lecture_item .lecture_teacher img{
	width:38px;
	margin-bottom:0px;
}
div.main_box .lecture_detail .lecture_item .toc span{
	font-size:14px;
	display:block;
    margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .toc span{
		margin-bottom:15px;
	}
}
div.main_box .lecture_detail .lecture_item .toc ul{
	list-style: none;
	margin-left: 30px;
	margin-bottom:0px;
}
div.main_box .lecture_detail .lecture_item .toc ul li{
	position:relative;
	font-size:14px;
	line-height:1.5;
	padding:3px 0;
	font-style: italic;
}
div.main_box .lecture_detail .lecture_item .toc ul li::before {
	position: absolute;
	left: -20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: #5193f7;
	content: '\f00c';
}
div.main_box .lecture_detail .lecture_item .toc i{
	color:#5193f7;
}
div.main_box .lecture_detail .lecture_item .toc p{
	margin-bottom:2px;
	font-size:14px;
}
div.main_box .lecture_detail .lecture_item .tag_group{
	display:flex;
	align-items: center;
	gap:6px;
	margin-bottom:10px;
	flex-wrap: wrap;/* 折り返す */
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .tag_group{
		margin-bottom:15px;
	}
}
div.main_box .lecture_detail .lecture_item .tag_group .tag{
	background:#e8f1ff;
	border-radius:7px;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_detail .lecture_item .tag_group .tag.is_recommended_first_lecture{
	background:#fff0db;
	border:solid 1px #ea9c2e;
	color:#cc8828;
	font-weight: 500;
}
div.main_box .lecture_detail .lecture_item .tag_group .tag.is_recommended_first_lecture i{
	color:#cc8828;
}
div.main_box .lecture_detail .lecture_item .tag_group .tag i{
	margin-right:2px;
	font-weight:bold;
	color:#5193f7;
}
div.main_box .lecture_detail .lecture_item .capacity_block{
/* 	display: flex;
	justify-content: flex-end; 右寄せ
	align-items: end; */
	margin-left: auto;
}
div.main_box .lecture_detail .lecture_item .capacity_block span{
	/* margin-right:5px; */
}
div.main_box .lecture_detail .lecture_item .capacity_block .participants{
	color:#ea9c2e;
	font-size:22px;
	font-weight:bold;
	line-height:1;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .capacity_block .participants{
		font-size:26px;
		line-height:1.2;
	}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ popup
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/********************************************************
■ アンカー
********************************************************/
div.anchor{
	width:100%;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index:1;
}
div.anchor div.anchor_main{
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
	margin-bottom:0px;
	height:50px;
	background:#e8f1ff;
}
div.anchor span.anchor_detail_btn{
	display:inline-block;
	height:40px;
	line-height: 40px;
	text-align:center;
	background:#5193f7;
	position:absolute;
	margin-bottom:0px;
	border:1px solid #5193f7;
	font-weight:bold;
	bottom:5px;
}
div.anchor img.anchor_detail_txt{
	width:280px;
	display:inline-block;
	padding:7px 0;
	margin-bottom:0;
}
@media only screen and (max-width: 320px){/* iphone5/se用 */
	div.anchor img.anchor_detail_txt{
		width:240px;
		padding:11px 0;
	}
}
@media only screen and (min-width: 738px){
	div.anchor img.anchor_detail_txt{
		width:500px;
		display:inline-block;
		padding:0;
	}
}
div.anchor img.anchor_close_btn{
	position:absolute;
	bottom:5px;
	margin-bottom:0px;
	width:40px;
}
/*--------------------------------------------------------
■ お気に入りリストボタン
--------------------------------------------------------*/
.fav_list_btn{
    position:fixed;
    z-index: 100;/* ピアノ教室探し方いろは、より下 */
	background:#eb2f5d;
	opacity: 0.8;
	border:none;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
	bottom:10px;
    cursor: pointer;
}
.fav_list_btn:focus{/* ボタンクリック時の不要な線を消す */
	outline:0;
}
@media only screen and (min-width: 1117px){
	.fav_list_btn {
		left:auto;
	}
}
/*--------------------------------------------------------
■ ピアノ教室掲載告知 アンカー広告
--------------------------------------------------------*/
.anchor_school_publication{
	display:none;/* jsでふわっと表示させるため */
	width:calc(100% - 10px);
	height:100%;
	max-width:335px;
	max-height:125px;
	position: fixed;
	bottom: 5px;
	left:50%;
	margin-left:-167px;/* リサイズ時はJSで調整 */
	z-index:101;/* お気に入り詳細ボタン、より上 */
	filter: drop-shadow(5px 5px 5px #aaa);/* 影 */
	cursor:pointer;
}
div.anchor_school_publication img#anchor_school_publication_btn{
    position:absolute;
	bottom:0;
	left:0;
	margin-bottom:0px;
	width:100%;
}
div.anchor_school_publication img#anchor_close_btn{
	position:absolute;
	top:-18px;
	right:5px;
	margin-bottom:0px;
	width:36px;
}
/*--------------------------------------------------------
■ レッスン診断ポップアップ
--------------------------------------------------------*/
div.anchor_lesson_diagnosis{
	position: fixed;
	width:calc(100% - 10px);
	max-width:335px;
	aspect-ratio:74/27;/* 縦横比 */
	bottom: 5px;
	z-index:101;
	left:50%;
	margin-left:-167px;/* リサイズ時はJSで調整 */
	filter: drop-shadow(5px 5px 5px #aaa);/* 影 */
	cursor:pointer;
	display:none;/* jsでふわっと表示させるため */
}
@media only screen and (min-width: 738px){
	div.anchor_lesson_diagnosis{
		max-width:500px;
		width:calc(100% - 20px);
		aspect-ratio:68/21;
		margin-left:-250px;
	}
}
@media only screen and (min-width: 1117px){
	div.anchor_lesson_diagnosis{
		max-width:335px;
		margin-left:-167px;
		aspect-ratio:74/27;/* 縦横比 */
	}
}
div.anchor_lesson_diagnosis .anchor_lesson_diagnosis_btn{
	cursor:pointer;
}
div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_small{
	width:100%;
	display:block;
    position:absolute;
	bottom:0;
	left:0;
	margin-bottom:0px;
}
@media only screen and (min-width: 738px){
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_small{
		display:none;
	}
}
div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_big{
	display:none;
}
@media only screen and (min-width: 738px){
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_big{
		width:100%;
		display:block;
	    position:absolute;
		bottom:0;
		left:0;
		margin-bottom:0px;
	}
}
@media only screen and (min-width: 1117px){
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_small{/* large画面では小さい画像を使用 */
		max-width:680px;
		display:block;
	}
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_big{
		display:none;
	}
}
div.anchor_lesson_diagnosis img#anchor_close_btn{
	position:absolute;
	top:-18px;
	right:5px;
	margin-bottom:0px;
	width:36px;
	z-index:102;
}
@media only screen and (min-width: 738px) and (max-width: 1116.999px) {
	div.anchor_lesson_diagnosis img#anchor_close_btn{
		position:absolute;
		top:-20px;
		right:15px;
		margin-bottom:0px;
		width:40px;
		z-index:102;
	}
}
/* 円状に広がるBG */
.circle_bg{
    position: fixed;
	z-index:101;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F45079;
    background: rgba(0,0,0,.7);
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
    top:calc(50% - 50px);/*50%から円の半径を引いた値*/
    left:calc(50% - 50px);/*50%から円の半径を引いた値*/
 	transition: transform 0.3s ease;/*0.6秒かけてアニメーション*/
}
.circle_bg.active{
	animation: circleAnimation 0.3s ease-in-out forwards;
	display: flex;
    justify-content: center;
    align-items: start;
}
@keyframes circleAnimation {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(50);
    }
}
.circle_bg.inactive{
	animation: resetCircleAnimation 0.3s ease-in-out forwards;
}
@keyframes resetCircleAnimation {
    0% {
        transform: scale(50);
    }
    100% {
        transform: scale(0);
    }
}
.answer_popup{
	 box-sizing: border-box;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    text-align: left;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	transition: transform 0.3s ease;
}
.answer_popup.active{
    display:flex;
    justify-content: center;
    align-items: start;
     animation: answerPopupAnimation 0.3s ease-in-out forwards;
}
@keyframes answerPopupAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5; /* 半透明にすることでフワッと表示 */
    }
    100% {
        opacity: 1;
    }
}
.answer_popup .content{
	background:#99c2ff;
    padding: 15px;
    width: 100%;
    margin: 90px 0px 20px 0px;
    position: relative;
    display:flex;
    flex-direction: column;
    gap:15px;
}
@media only screen and (min-width: 738px){
    .answer_popup .content{
        border-radius: 20px;
        margin: 90px 10px 20px 10px;
    }
}
@media only screen and (min-width: 1117px){
	.answer_popup .content{
	    max-width: 1100px;
	}
}
.answer_popup .content.answer{
	background:#fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.answer_popup .content.answer.visible {
    opacity: 1;
}
.answer_popup .content .title{
	font-weight:bold;
	margin-bottom:10px;
	font-size:17px;
}
@media only screen and (min-width: 738px){
	.answer_popup .content .title{
		font-size:20px;
	}
}
.answer_popup .content .title.answer{
	color:#5193F7;
	position:relative;
	padding:10px 20px;
	width:fit-content;
	margin-right:auto;
	margin-left:auto;
	margin-top:30px;
}
.answer_popup .content .title.answer.red{
	color:#F45079;
}
.answer_popup .content .title.answer.yellow{
	color:#ea9c2e;
}
.answer_popup .content .title.answer:before,
.answer_popup .content .title.answer:after{
	position:absolute;
	color:#99c2ff;
	font-size:24px;
	font-family:'Font Awesome 6 Pro';
	background:none;
}
.answer_popup .content .title.answer.red:before,
.answer_popup .content .title.answer.red:after{
	color:#FFE8ED;
	color:#ff99b3;
}
.answer_popup .content .title.answer.yellow:before,
.answer_popup .content .title.answer.yellow:after{
	color:#ffd199;
}
.answer_popup .content .title.answer:before{
	content: '\f10d';
	top:0px;
	left:-8px;
}
.answer_popup .content .title.answer:after{
	font-family:'Font Awesome 6 Pro';
	content: '\f10e';
	bottom:0px;
	right:-8px;
}
.answer_popup .content .recommend{
	margin-top:-10px;
}
.answer_popup .content .point_box{
	padding: 20px;
    border-radius: 20px;
    background:#e8f1ff;
    display:inline-flex;
    width:100%;
    flex-direction: column;
    position: relative;
    gap:15px;
    margin-bottom:10px;
}
.answer_popup .content .point_box .point_item{
    display:flex;
    gap:20px;
    align-items: center;
}
.answer_popup .content .point_box .point_item .img_point{
    width:36px;
    margin-bottom:0px;
}
.answer_popup .contendiv.background_box.red ul li:before {
    width:36px;
    margin-bottom:0px;
}
.answer_popup .content .point_box .point_item a.video_link{
    width:calc(100% - 56px;);
    font-weight:bold;
    text-decoration: underline;
}
.answer_popup .content .balloon_comment {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding: 8px 10px;
	border-radius:15px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #e8f1ff;
}
.answer_popup .content .balloon_comment:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #e8f1ff;
}

.answer_popup .content .balloon_comment p {
  margin: 0;
  padding: 0;
}
.answer_popup .content .close_btn{
    position: absolute;
    top: 10px;
    right: 16px;
    color: #fff;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}
.answer_popup .content.answer .close_btn{
	color: #606060;
}
.answer_popup .content .close_btn i{
	margin-right:0px;
}
.answer_popup .content .video_box{
    aspect-ratio: 16 / 9;
    overflow-x: hidden;
    width:calc(100% + 30px);
    margin-left:-15px;
    margin-right:-15px;
}
@media only screen and (min-width: 738px){
    .answer_popup .content .video_box{
        width:100%;
        margin-left:0px;
        margin-right:0px;
    }
}
.answer_popup .content .video_box iframe{
	width:100%;
	height:100%;
}
.answer_popup .content .comment_with_bar{
    font-size:13px;
    font-weight:bold;
    position: relative;
    display:inline-block;
    margin:0 auto;
    margin-bottom:10px;
    color:#5193f7;
}
.answer_popup .content .comment_with_bar::before,
.answer_popup .content .comment_with_bar::after {
    position: absolute;
    top: -6px;
    top: 0px;
    width: 2px;
    height:100%;
    content: '';
    background:#5193f7;
}
.answer_popup .content .comment_with_bar::before {
    left: -10px;
    transform: rotate(-30deg);
}
.answer_popup .content .comment_with_bar::after {
    right: -10px;
    transform: rotate(30deg);
}
/* レッスンタイプ診断LINE風 */
.diagnostic_block{
	background:#99c2ff;
	margin-bottom:90px;
}
.diagnostic_block .diagnostic_inner{
	max-width:1100px;
	margin-right:auto;
	margin-left:auto;
	display:flex;
	gap:30px;
	 flex-direction: column;
}
.diagnostic_block .diagnostic_item{
	display:none;
	transition: transform 0.3s ease;
}
.diagnostic_block .diagnostic_item.visible{
	display:flex;
	gap:30px;
}
.diagnostic_block .diagnostic_item.answer{
	justify-content:flex-end;/* answerは右寄せにする */
}
.diagnostic_block .icon_box{
	width:55px;
	transform: scale(0);/*scaleをはじめは0に*/
	transition: transform 0s ease;/*0.6秒かけてアニメーション*/
}
.diagnostic_block .diagnostic_item.visible .icon_box{
	animation: iconAnimation 0.3s ease-in-out forwards;
}
@keyframes iconAnimation {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@media only screen and (min-width: 738px){
	.diagnostic_block .icon_box{
		width:100px;
	}
}
.diagnostic_block .icon_box img{
	width:100%;
}

.diagnostic_block .comment_box{
	  width: fit-content; /* コンテンツに合わせる */
	  transition: transform 0s ease;/*0.6秒かけてアニメーション*/
	  display:none;
}
.diagnostic_block .diagnostic_item.visible .comment_box{
	display:block;
	transform: scale(0);/*scaleをはじめは0に*/
	overflow:visible;
}
.diagnostic_block .diagnostic_item.visible .comment_box.question{
	animation: commentQuestionAnimation 0.3s ease-in-out forwards;
	animation-delay: 0.6s; /* 0.6秒後にアニメーションを開始 */
}
.diagnostic_block .diagnostic_item.visible .comment_box.answer{
	animation: commentAnswerAnimation 0.3s ease-in-out forwards;
	animation-delay: 0.6s; /* 0.6秒後にアニメーションを開始 */
}
@keyframes commentQuestionAnimation {
  0% {
    transform: translateX(-100%) scale(0); /* 左側から出現し、初期サイズ0 */
  }
  100% {
    transform: translateX(0) scale(1); /* 左から右に移動し、フルサイズに拡大 */
  }
}
@keyframes commentAnswerAnimation {
  0% {
    transform: translateX(100%) scale(0); /* 右側から出現し、初期サイズ0 */
  }
  100% {
    transform: translateX(0) scale(1); /* 右から左に移動し、フルサイズに拡大 */
  }
}
.diagnostic_block .comment_box.answer{
	width:calc(100% - 55px);
	max-width:500px;
}
.diagnostic_block .comment_box .comment_main{
	background:#fff;
	padding:8px 10px;
	border-radius:15px;
	position: relative;
	font-weight:bold;
	color:#2668cc;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box .comment_main{
		padding:16px 20px;
		font-size:18px;
	}
}
.diagnostic_block .comment_box.answer .comment_main{
	background:#5193f7;
	display:flex;
	flex-direction: column;
	gap:10px;
	padding:20px;
	z-index:1;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box.answer .comment_main{
		gap:20px;
	}
}
.diagnostic_block .comment_box.question .comment_main::before {
	content: '';
	position: absolute;
	top: 13px;
	left: -20px; /* 三角形が左にずれる量 */
	border-width: 8px 10px;
	border-style: solid;
	border-color: transparent #fff transparent transparent; /* 左側に三角形を配置する */
	z-index: 10000;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box.question .comment_main::before {
		top: 21.5px;
		left: -24px; /* 三角形が左にずれる量 */
		border-width: 10px 12px;
	}
}
.diagnostic_block .comment_box.answer .comment_main::after {
  content: '';
  position: absolute;
  top: 13px;
  right: -20px; /* 三角形が右にずれる量 */
  border-width: 8px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #5193f7; /* 右側に三角形を配置する */
  z-index: 10000;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box.answer .comment_main::after {
		top: 21.5px;
		right: -24px; /* 三角形が左にずれる量 */
		border-width: 10px 12px;
	}
}
.diagnostic_block .comment_box .comment_main p{
	margin-bottom:0px;
}
.diagnostic_block .comment_box .comment_main .answer_btn{
	border:none;
	badkground:#fff;
	height:50px;
	border-radius:40px;
	background:#fff;
	font-weight:bold;
	color:#2668cc;
	cursor:pointer;
	font-size:15px;
	transition: background-color 0.3s ease; /* 背景色の変化をスムーズにするアニメーション */
}
.diagnostic_block .comment_box .comment_main .answer_btn.active{
	background:#2668cc;
	color:#fff;
}
.diagnostic_block .comment_box .comment_main .answer_btn:focus {
    outline: none;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box .comment_main .answer_btn{
		font-size:18px;
		height:60px;
	}
	.diagnostic_block .comment_box .comment_main .answer_btn:hover{
		background:#2668cc;
		color:#fff;
	}
}
/* リセットボタン */
.answer_popup .reset_btn{
    position: relative;
    display:none;
    padding:20px 30px;
    color: #fff;
    z-index: 1;
    border:none;
    background:none;
    outline: none;
    cursor:pointer;
    font-weight:bold;
    font-size:15px;
    margin-bottom:20px;
}
@media only screen and (min-width: 738px){
	.answer_popup .reset_btn{
	   /* margin-bottom:45px; */
	}
}
.answer_popup .reset_btn.visible{
    display: inline-block;
     animation: resetBtnAnimation 0.6s ease-in-out forwards;
}
@keyframes resetBtnAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5; /* 半透明にすることでフワッと表示 */
    }
    100% {
        opacity: 1;
    }
}
.answer_popup .reset_btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background:#2668cc;
    transition: all .3s;
 }
.answer_popup .reset_btn:hover:before {
  right: 0;
  transform: scale(1.1);
  background: #2668cc;
}
.answer_popup .reset_btn i{
    margin-left:10px;
    margin-right:0px;
}
/********************************************************
■ 全画面ポップアップ
********************************************************/
div.modal{
	position:absolute;
	width:100%;
	height: 100vh;/* 表示画面いっぱいにする */
	/*display:none;*/
	margin-left:-5px;/* .containerのmargin分をネガティブマージンで無くす */
	margin-right:-5px;
}
@media only screen and (min-width: 738px){
	div.modal{
		margin-left:-10px;/* .containerのmargin分をネガティブマージンで無くす */
		margin-right:-10px;
	}
}
@media only screen and (min-width: 1117px){
	div.modal{
		margin-left:0px;/* .containerのmargin分をネガティブマージンで無くす */
		margin-right:0px;
	}
}
div.modal .over_lay {/* オーバーレイ（薄い黒幕）*/
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	width:100%;
	height:100vh;/*  表示画面いっぱいにする*/
	z-index:1001;/* 重ね順（ハンバーガーメニューより前面にする） */
}
div.modal .inner {
	position:absolute;
	z-index:1002;/* 重ね順（最も手前） */
/* 	bottom:0;
	left:0; */
}
div.modal img#popup_main{
	width:100%;
	margin-bottom:0px;
}
div.modal img#popup_piece{
	position:absolute;
	left:0;
	width:100%;
	margin-bottom:0px;
}
div.modal img#btn_popup_detail{
	position:absolute;
	margin-bottom:0px;
}
div.modal img#btn_popup_close{
	position:absolute;
	margin-bottom:0px;
}
body.no_scroll {/* ポップアップ表示時はbodyのスクロールをできないように */
    overflow: hidden;
}
div.beginner_tab_select div.slider_beginner{/*初心者画面*/
	z-index:3;
	position:absolute;
	width:100%;
	top:40%;
	height:40%;
}
div.intermediate_tab_select div.slider_intermediate{/*中級者画面*/
	z-index:3;
	position:absolute;
	width:100%;
	top:40%;
	height:40%;
}
div.advanced_tab_select div.slider_advanced{/*上級者画面*/
	z-index:3;
	position:absolute;
	width:100%;
	top:40%;
	height:40%;
}

div.title_img img{
	position:absolute;
	height:13%;
}

div.template_img img{
	width:78%;
	margin-top: 13.5%;
	margin-left:11%;
	box-shadow: 2px 2px 4px;
}
.prev-arrow {/*前矢印について*/
	top:30%;
	left: -1%;
	z-index: 10;
	height	:85%;
	cursor: pointer;
}
.next-arrow {/*後矢印について*/
	top:30%;
	right: -1%;
	z-index: 10;
	height: 85%;
	cursor: pointer;
}

div.intermediate_tab_select{
	display: none;/*タブを切り替えるまでは不可視*/
}
div.advanced_tab_select{
	display: none;/*タブを切り替えるまでは不可視*/
}
div.modal img#beginner_first_tab{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	margin-bottom:0px;
	z-index:1;
}
div.modal img#beginner_second_tab{
	position:absolute;
	top:25%;
	left:37%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#beginner_third_tab{
	position:absolute;
	top:25%;
	left:68.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}

div.modal img#intermediate_first_tab{
	position:absolute;
	top:25%;
	left:5.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#intermediate_second_tab{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	margin-bottom:0px;
	z-index:1;
}
div.modal img#intermediate_third_tab{
	position:absolute;
	top:25%;
	left:68.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}

div.modal img#advanced_first_tab{
	position:absolute;
	top:25%;
	left:5.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#advanced_second_tab{
	position:absolute;
	top:25%;
	left:37%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#advanced_third_tab{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	margin-bottom:0px;
	z-index:1;
}
div.count{/*5秒カウントについて*/
	position:absolute;
	top:90.6%;
	left:81.5%;
	color:white;
	font-weight:600;
	font-size:3.8vh;
	height: 6.9vh;
	width: 6.9vh;
	border-radius:50%;
	text-align:center;
	background:#C0C0C0;
	line-height: 6.5vh;
}

div.modal_close #btn_popup_close{/*閉じるボタンについて*/
	top:90.6%;
	width:9.2%;
	left:81.5%;
	cursor: pointer;
}

@media screen and (min-width: 481px) and (max-width: 1024px){/*タブレット縦*/
	div.count{
		top:90.7%;
		left:82%;
		font-size:31px;
		height: 62px;
		width: 62px;
		line-height: 62px;
	}
	div.modal_close #btn_popup_close{
		top:90.7%;
		left:82%;
	}
}

@media only screen and (min-width: 896px) and (max-width: 1024px) and (orientation: landscape) {/*タブレット横*/
	div.count{
		top:90.8%;
		left:81%;
		font-size:23px;
		height: 46px;
		width: 46px;
		line-height: 46px;
	}
	div.modal_close #btn_popup_close{
		top:90.8%;
		left:81%;
	}
}

@media screen and (max-width: 896px) and (orientation: landscape){/*スマホ横*/
	div.count{
		top:90.8%;
		left:81.3%;
		font-size:13px;
		height: 25px;
		width: 25px;
		line-height: 25px;
	}
	div.modal_close #btn_popup_close{
		top:90.8%;
		left:81.3%;
	}
}

@media screen and (max-width: 480px) {/*スマホ縦*/
	div.count{
		top:90.7%;
		left:82%;
		font-size:5vw;
		height: 9.2vw;
		width: 9.2vw;
		line-height: 8.8vw;
	}
	div.modal_close #btn_popup_close{
		top:90.7%;
		left:82%;
	}
}

@media screen and (max-width: 374px) {/*iphone5s縦*/
  	div.count{
		font-size:2.9vh;
		height: 5.2vh;
		width: 5.2vh;
		line-height: 4.8vh;
	}
	div.modal_close #btn_popup_close{
		top:90.7%;
		left:82%;
	}
}
/********************************************************
■ モーダルウィンドウ
********************************************************/
.modal_window {
    /* display:none; */
    height: 100vh;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.7);/* 背景を黒半透明にする */
    position: fixed;
    top: 0;
    left: 0;
    z-index:1001;
}
.modal_window.show {
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal_window .content{
    display: flex;
    justify-content: center;
    flex-flow: column;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
  	justify-content:space-between;
	background: #fff;
    padding: 30px;
    width: 100%;
    max-width:500px;
    min-height:250px;
    border-radius: 10px;
    margin: 0 10px;
    position: relative;
    gap:10px;/* 要素と要素の余白を指定 */
}
@media only screen and (min-width: 1117px){
	.modal_window .content{
	    max-width: 680px;
	}
}
.modal_window .content .title{
	font-weight:bold;
	font-size:17px;
	position:relative;
	padding:4px 0 4px 25px;
}
.modal_window .content .title.info,
.modal_window .content .title.error{
	color:#606060;
}
/*  見出しの縦棒*/
.modal_window .content .title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
    width: 6px;
    height: 100%;
}
.modal_window .content .title.info:before {
	background: #25ae78;
}
.modal_window .content .title.warning:before {
	background: #ea9c2e;
}
.modal_window .content .title.error:before {
	background: #eb2f5d;
}
.modal_window .content p{
	flex-grow: 1;/* flex-grow: 1;を指定することで、親要素の余白を埋めるように要素が伸びる */
	display: flex;
	align-items:center;
	margin-bottom:0px;
}
/*  ボタン*/
.modal_window .content .modal_btn_block{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;/* ボタンとボタンの間を開ける */
    align-items:center;
	justify-content:center;
	width:100%;
	margin-top: auto;
}
.modal_window .content .modal_btn_block a{/* 実際のボタン描画領域はaタグのため、カーソルCSSはこちらに記述 */
	cursor: pointer;
}
@media only screen and (min-width: 738px){
	.modal_window .content .modal_btn_block{
		gap: 20px;/* ボタンとボタンの間を開ける */
	}
}
.modal_window .content .modal_btn_block .modal_btn{
	flex: 1 1 0%;
}
.modal_window .content .modal_btn_block.one .modal_btn{
	flex:initial;
	flex-grow: 1;
	max-width:180px;
}
@media only screen and (min-width: 738px){
	.modal_window .content .modal_btn_block .modal_btn{
		flex:initial;
	}
}
.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:50px;
	border-radius:5px;
	font-weight:bold;
}
@media only screen and (min-width: 738px){
	.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner{
		width:180px;
	}
}
.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner.main{
	background:#5193f7;
	color:#fff;
}
.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner.sub{
	background:#fff;
	color:#5193f7;
	border:1px solid #5193f7;
}
/* 情報／警告／エラーが見分けられるアイコン入の○ */
.modal_window .content .i_circle_main{
	position: absolute;
    left: 50%;
    top: -24px;
    width:48px;
    height:48px;
    border-radius:50%;
    margin-left:-24px;
    background: #ffffff;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
}
.modal_window .content .i_circle_sub{
	width:38px;
    height:38px;
    border-radius:50%;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
}
.modal_window .content .i_circle_sub.info{
	background:#25ae78;
}
.modal_window .content .i_circle_sub.warning{
	background:#ea9c2e;
}
.modal_window .content .i_circle_sub.error{
	background: #eb2f5d;
}
.modal_window .content .i_circle_sub i{
	font-size:18px;
	color:#fff;
	margin-right:0;
}