@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* =====================
　　共通、既存カスタマイズ
===================== */

.freearea {
	margin: 0;
}

/*  サブカテ非表示
------------------------*/
.titlebar_list > .accordion {
 display: none;
}

/*  閲覧履歴レコメンド非表示
------------------------*/
#fsrecommenddiv7 {
	display: none;
}

/*  フォント
------------------------*/
.sp_mid_sprt {
	font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
	letter-spacing: .15em;
	color: #333;
	font-feature-settings: "pkna" 1;
}
/* -------------*/

.sp_mid_sprt {
  margin-bottom: 100px;
	text-align: center;
	color: #333;
}

.sp_mid_sprt p,
.sp_mid_sprt h1,
.sp_mid_sprt h2,
.sp_mid_sprt h3,
.sp_mid_sprt h4 {
	margin: 0;
	padding: 0;
	line-height: 2;
	letter-spacing: .16em;
}
.sp_mid_sprt h1 {
	font-size: 18px;
}
.sp_mid_sprt h2 {
	font-size: 17px;
	margin: 35px 0;
}
.sp_mid_sprt h3 {
	font-size: 16px;
	margin: 30px 0;
}
.sp_mid_sprt h4 {
	font-size: 15px;
	margin: 30px 0;
}
.sp_mid_sprt p {
	font-size: 14px;
	letter-spacing: .12em;
	margin: 20px 0;
}

.sp_mid_sprt .tx_center {
	text-align: center;
}
.sp_mid_sprt .tx_left {
	text-align: left;
}

.sp_mid_sprt span.font_color { /* フォントに色付け */
	color: #f1a08e;
}

.sp_mid_sprt p + a {
	margin-top: 30px;
}

/*  h2、h3、h4に装飾
------------------------*/
h4.h_line_01,
h3.h_line_01,
h2.h_line_01 {
	align-items: center; /* 横線を上下中央 */
	display: flex; /* 文字と横線を横並び */
	justify-content: center; /* 文字を中央寄せ */
}
h4.h_line_01 {
	margin-top: 40px;
	margin-bottom: 20px;
	line-height: 1.8;
}
h4.h_line_01::before,
h4.h_line_01::after,
h3.h_line_01::before,
h3.h_line_01::after,
h2.h_line_01::before,
h2.h_line_01::after {
  background-color: #eee; /* 横線の色 */
  content: "";
  height: 2px; /* 横線の高さ */
  width: 5vw; /* 横線の長さ */
}
h4.h_line_01::before,
h3.h_line_01::before,
h2.h_line_01::before {
  margin-right: 5vw; /* 文字との余白 */
}
h4.h_line_01::after,
h3.h_line_01::after,
h2.h_line_01::after {
  margin-left: 5vw; /* 文字との余白 */
}

/*  a
------------------------*/
.sp_mid_sprt a {
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* android */
	color: #333;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	text-decoration: none;
	display: block;
}
.sp_mid_sprt a:active {
	color: #777;
	text-decoration: none;
}
.sp_mid_sprt a.marker,
.sp_mid_sprt a .marker {
	background: linear-gradient(transparent 85%, #fedddc 85%);
	font-weight: bold;
	display: inline;
}

/* a  画像フェードインアウト
------------------------*/
.sp_mid_sprt a:active img {
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-o-opacity: 0.7;
	filter: alpha(opacity=70);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=70)"; /* IE 8 */
	opacity: 0.6;
}
.sp_mid_sprt a img {
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
	-webkit-backface-visibility: hidden; /* 追加 */
	backface-visibility: hidden; /* 追加 */
}

/*  ▶ テキストリンク
------------------------*/
.sp_mid_sprt .arrow_right_caret {
  position: relative;
  display: inline-block;
	font-size: 11px;
  padding: 8px 8px 0 13px;
	margin-top: .5em;
	margin-bottom: 0;
}
.sp_mid_sprt .arrow_right_caret::before {
  content: "";
  position: absolute;
	/* 画像設定 */
  background-image: url("/sp/midori_supporter/img/arrow_right_caret.png");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像表示サイズ */
  width: 6px;
  height: 8px;
  /* 画像表示位置 */
  left: 0;
	top: calc(8px + .7em);
}
.sp_mid_sprt .arrow_right_caret:active {
	color: #fba6a5;
	opacity: 1;
}

/*  ul flexbox指定
------------------------*/
.sp_mid_sprt ul {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

/*  ul li 黒丸インデント
------------------------*/
ul.cercle_indent li {
  text-indent: -1.5em;
  padding-left: 1.5em;
	font-size: 13.5px;
	line-height: 2;
	margin-top: .5em;
	letter-spacing: .1em;
	text-align: left;
	display: inline-block;
}
ul.cercle_indent li:first-child {
	margin-top: 0;
}
ul.cercle_indent li::before {
  content: '・';
}

div.bgcolor ul.cercle_indent + p {
	margin-top: 1.5em!important;
}

/* main_message 調整*/
.main_message ul.cercle_indent li::before {
	margin-right: .5em;
}

/*  ol li インデント
------------------------*/
.sp_mid_sprt div.bgcolor ol {
	padding: 0;
	margin: 0;
}
.sp_mid_sprt div.bgcolor ol li {
	text-indent: -1.5em;
  padding-left: 20px;
	font-size: 13.5px;
	line-height: 2;
	margin-top: .5em;
	letter-spacing: .1em;
	text-align: left;
	display: inline-block;
	width: 100%;
}
.sp_mid_sprt div.bgcolor ol li:first-child {
	margin-top: 0;
}
div.bgcolor ol + p {
	margin-top: 1.5em!important;
}


/*  visibility
------------------------*/
.sp_mid_sprt .visibility {
	display: none;
}

/*  グループ
------------------------*/
#sp_content section { /* default打ち消し用 */
	width: auto;
}
#sp_content section,
.sp_mid_sprt div#report_end  {
	margin-top: 50px;
	padding-top: 10px;
}
#sp_content .line_02 {
	margin-top: 40px;
	padding-top: 10px;
}

/* 区切り線 タイプ1 */
.sp_mid_sprt .line_01 {
	position: relative;
}
.sp_mid_sprt .line_01:before {
  background: url(/sp/midori_supporter/img/line_smp.jpg) repeat;
  content: "";
  display: block;
  width: 90%;
  height: 7px;
  background-size: contain;
  margin: 0 auto 30px;
  opacity: 1;
}
.sp_mid_sprt .line_01.side_margin:before {
	width: 100%;
}

/* 区切り線 タイプ2 */
.sp_mid_sprt .line_02 {
	position: relative;
}
.sp_mid_sprt .line_02::before {
	content: '';
	position: absolute;
	left: 50%;
	display: inline-block;
	width: 50%;/*線の長さ*/
	height: 4px;/*線の太さ*/
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);/*位置調整*/
	background-color: #f9f4ee;/*線の色*/
	border-radius: 999px;/*線の丸み*/
	opacity: 1;
}
#sp_content h2 + .line_02 {
	margin-top: -10px;
}

/*  side_margin
------------------------*/
#sp_content .side_margin {
	margin-right: 6%;
	margin-left: 6%;
}
.side_margin .side_margin p {
	font-size: 13.5px;
}

/*  スライド
------------------------*/
.slide_show {
	margin: 0 auto;
	position: relative;
}
.slide_show img {
	position: absolute;
	top: 0;
	left: 0;
}

/*  インビューアニメーション
------------------------*/
.sp_mid_sprt .sa {
	opacity: 0;
	transition: all 1.6s ease;
}
.sp_mid_sprt .sa.show {
	opacity: 1;
	transform: none;
}

/*  more ボタン
------------------------*/
.more_contents {
	width: 100%;
	margin-top: 20px;
	overflow: hidden;
}

.more_contents li.is-hidden {
	opacity: 0;
	height: 0;
	margin: 0;
	margin-bottom: 0px;
	cursor: none;
}
.more_contents li.is-hidden a {
	cursor: default;
}

.sp_mid_sprt .more {
	position: relative;
  text-align: center;
  line-height: 4.2em;
  margin: -25px auto 50px;
}
.sp_mid_sprt .more a {
	width: 70%;
	margin: 0 auto;
	display: block;
	border: 1px solid #bbb;
	font-size: 13px;
	box-sizing: border-box;
	letter-spacing: 1.5!important;
	border-radius: 6px;
	color: #444!important;
}
.sp_mid_sprt .more a:active {
	border: 1px solid #999;
	color: #999!important;
	background-color:#f2f2f2;
}

.sp_mid_sprt .close {
	position: relative;
	text-align: center;
	line-height: 4.2em;
	margin: 25px auto 50px;
}
.sp_mid_sprt .close a {
	width: 70%;
	margin: 0 auto;
	display: block;
	border: 1px solid #bbb;
	font-size: 13px;
	box-sizing: border-box;
	letter-spacing: 1.5!important;
	border-radius: 6px;
	color: #444!important;
}
.sp_mid_sprt .close a:hover {
	border: 1px solid #999;
	color: #999!important;
	background-color:#f2f2f2;
}

.sp_mid_sprt .more_btn {
	margin-top: 30px;
}


/* =====================
  main_first
===================== */
section#main_first {
	margin-top: 0;
	padding-top: 0;

}
section#main_first:before {
	background: none;
	margin: 0!important;
	width: 0;
	height: 0;
	display: none;
}

/*  スライドカスタマイズ
------------------------*/
#main_first .slide_show {
	height: 58.139vw;
	overflow: hidden;
	margin: 0;
}
.sp_mid_sprt #main_first .slide_show img {
	display: none;
	width: 100%!important;
	max-width: 100%!important;
}

/*  main_message
------------------------*/
.main_message {
	margin: 34px auto 0!important;
}
.main_message p {
	margin: 24px auto 0;
}
.main_message h2 {
	margin-bottom: 20px;
}


/* =====================
  ミドリインスタ紹介
===================== */

/* インスタ紹介ボタン */
a.insta_info_btn{
  padding: 0.5em;
  margin: 24px auto 0 -15px;
  display: inline-block;
  font-weight: bold;
  font-size:15px;
}
a.insta_info_btn:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: -3px 15px 0 0;
  background: url("/sp/midori_supporter/img/Instagram_Glyph_Gradient.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.sp_mid_sprt a.insta_info_btn:active {
	opacity: .5;
}

/* ======================================================

  トップページ

====================================================== */

/* =====================
  top_menu
===================== */
#sp_content #top_menu {
	margin-bottom: -20px;
  margin-top: 40px;
}
#top_menu ul.side_margin {
	margin: 0 10%!important;
}
#top_menu ul li {
	text-align: center;
	margin-right: 6.5%;
	width: 29%;
	position: relative;
}

#top_menu ul li:nth-child(3n) {
	margin-right: 0;
}
#top_menu ul li p {
	line-height: 1.5;
	margin: 0.5em 0 0;
}
#top_menu ul li a {
  display: block;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 1.3em;
	margin-top: 6px;
  text-align: center;
  text-decoration: none;
  transition: all .2s linear;
}
#top_menu ul li:nth-last-child(-n+3) a {
 padding-bottom: 0;
 margin-top: 0;
}
/* 準備中*/
#top_menu ul li.not_open {
	pointer-events: none!important;
	opacity: .7!important;
}
#top_menu ul li.not_open a p {
	color: #999;
}

/* =====================
  記事一覧
===================== */
#top_report {
	margin: 0 0 70px;
}
#top_report  h2 span { /* h2調整 */
	font-size: 16px;
	letter-spacing: .2em;
}
#top_report ul {
	margin-top: 45px;
}
#top_report ul li {
	position: relative;
	padding: 0 0 30px 0;
}
#top_report ul li:last-child {
	padding-bottom: 0;
}
#top_report ul li img {
	width: 100%;
	margin-bottom: 12px;
}
#top_report ul li h3 {
	font-size: 15px;
	text-align: left;
	margin: 0;
}
#top_report ul li p {
	font-size: 13px;
	margin: 4px 0 0;
	text-align: left;
}
#top_report ul li.release::before {
	position: absolute;
	top: -27px;
	left: -10px;
	content: "";
	display: inline-block;
	width: 72px;
	height: 45px;
	background: url(/sp/midori_supporter/img/ico_new.png) no-repeat;
	background-size: contain;
	z-index: 3;
}

#top_report a.logo_for_top {
	margin: 40px auto 0;
}

#top_report ul li#article_target {
	padding-top: 30px;
	margin-top: -30px;
}

/* =====================
  ミドリサポーターとは
===================== */

/*  こんなことやってます
------------------------*/
.sprt_about ul {
	margin-bottom: 20px!important;
	justify-content: center;
}
.sprt_about ul li {
	width:88%;
	font-size: 13.5px;
	font-weight: bold;
	padding: 1em 0;
	border-bottom: 2px solid #f9f4ee;
	line-height: 2;
}
.sprt_about ul li:first-child {
	margin-top: .3em;
}
.sprt_about ul li:last-child {
	border-bottom: none;
}

/*  sprt_member
------------------------*/
.sp_mid_sprt #sprt_member {
	margin-top: -10px!important;
}

#sprt_member li{
	text-align: left;
	word-break: break-all;
}
#sprt_member li:first-child {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
#sprt_member li:nth-child(odd) {
	margin-right: 0;
}
#sprt_member li a {
	display: flex;
	margin: 1em 0;
}
#sprt_member li img {
	width: 20%;
	height: 20%;
}
#sprt_member li img.ico_ig {
	width: 29px;
	height: 29px;
	align-self: center;
	margin: 0 15px;
}
#sprt_member li p {
	align-self: center;
	font-weight: bold;
	font-size: 12px;
	margin: 0;
}

/* =====================
  みんなの投稿
===================== */
/* comming soon */
/*
.sp_mid_sprt #sp_post h2,
.sp_mid_sprt #sp_post p {
	color: #979392;
	opacity: .7;
}
*/
#sp_post h2 span { /* h2調整 */
	font-size: 13px;
	display: block;
	margin-bottom: .5em;
}




/* ======================================================

  レポートページ
	.repo_page

====================================================== */

/* =====================
  main_first
===================== */

.repo_page #main_first .main_message h1 {
	font-size: 20px;
}
.repo_page.repo_vol_5 #main_first .main_message h1 {
	letter-spacing: .1em;
}

/* ミドリサポーター ロゴ */
a.logo_for_top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: fit-content;    
  margin: 20px auto 12px;  
}
a.logo_for_top::before { /* 矢印アイコン*/
  content: "";
  display: inline-block;
  width: 2%;
  aspect-ratio: 9 / 14;
  background-image: url('/sp/midori_supporter/img/reports/logo_for_top_arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4%;
  flex-shrink: 0;
}
a.logo_for_top img {
  width: 40%;  
  height: auto;
	margin-right: calc(2% + 4% + 3% );
}
a.logo_for_top p {
  width: 100%;
  margin: 10px 0 0 0; 
	font-size: 12px;  
  text-align: center; 
}

/* =====================
  共通
===================== */

/*  背景色 bgcolor
------------------------*/
div.bgcolor {
	background-color: #fcf8f4;
	border-radius: 25px;
	padding: 20px;
	margin-top: 20px;
}
div.bgcolor h3 {
	font-size: 14px;
	margin: 0 0 15px;
}
div.bgcolor h4 {
	font-size: 14px;
	margin: 0 0 15px;
}
div.bgcolor h5 {
	font-size: 14px;
	margin: 0 0 14px 0;
}
div.bgcolor p {
	text-align: left;
	font-size: 13.5px;
	margin: 0;	
}
div.bgcolor + p,
p + div.bgcolor,
div.bgcolor + div.bgcolor {
	margin-top: 30px;
}

/*  QA
------------------------*/
.sp_mid_sprt div.qa {
	margin-top: 30px;
	padding: 0 20px 1px;
	background-color: #fcf8f4;
	border-radius: 25px;
}

.sp_mid_sprt div.qa p {
	text-align: left;
	text-align: justify;
	font-size: 13.5px;
}
.sp_mid_sprt p.qa_q {
	font-size: 14px!important;
	font-weight: bold;
	margin-top: 30px;
}
.sp_mid_sprt p.qa_q:first-child {
	padding-top: 20px;
}
.sp_mid_sprt p.qa_a {
	letter-spacing: .05em;
}
.sp_mid_sprt p.qa_a span {
	font-size: 20px;
	font-weight: bold;
	margin-right: .3em;
	color: #f1a08e;
	line-height: 0;
}
.sp_mid_sprt div.qa + p {
	font-size: 13.5px;
	margin-top: 30px;
	text-align: left;
}

/*  サポーターさん プロフィール
------------------------*/
a.supporter {
	width: 100%;
	display: flex;
	margin: 40px 20px 20px 0;
}
a.supporter img {
	width: 20%;
	height: 20%;
}
a.supporter img.ico_ig {
	width: 29px;
	height: 29px;
	align-self: center;
	margin: 0 15px 0 15px;
}
a.supporter p {
	align-self: center;
	font-weight: bold;
	margin: 0;
	text-align: left;
}
a.supporter p.p_small {
	font-size: 12px;
}
a.supporter p span {
	font-size:10px;
	font-weight: normal;
	display: inline-block;
}
a.supporter + div.bgcolor {
	margin-top: 20px;
}

a.supporter + p {
	margin-top: 30px;
}
h2 + a.supporter {
	margin-top: 0;
}

/* article_point
------------------------*/
.article_point h3 {
	margin-bottom: 20px;
}
.article_point img + img {
	margin-top: 20px;
}
.article_point p {
	margin-top: 20px;
	margin-bottom: 30px;
	text-align: left;
}

/*  article_item
------------------------*/
.article_item h3 {
/*	margin: 50px 0 40px!important;*/
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.article_item h3::before,
.article_item h3::after {
  background-color: #eee; /* 横線の色 */
  content: "";
  height: 2px; /* 横線の高さ */
  width: 5vw; /* 横線の長さ */
}
.article_item h3::before {
  margin-right: 5vw; /* 文字との余白 */
}
.article_item h3::after {
  margin-left: 5vw; /* 文字との余白 */
}

.article_item ul {
	justify-content: space-between;
}
.article_item ul li {
	width: 30%;
	margin-top: 2em;
}
.article_item ul li:nth-child(-n+3){
	margin-top: 0;
}
.article_item li h4 {
	font-size: 11px;
	margin: 5px 0 0;
	text-align: left;
	line-height: 1.8;
	letter-spacing: .05em;
	font-weight: normal;
}
.article_item ul li img {
	width: 100%;
}
.sp_mid_sprt .article_item li.visibility {
	display: block;
}

.article_item.item_h3 li h3 {
	font-size: 11px;
	margin: 5px 0 0;
	text-align: left;
	line-height: 1.8;
	letter-spacing: .05em;
	font-weight: normal;
	display: inline-block;
}
.article_item.item_h3 li h3::before,
.article_item.item_h3 li h3::after {
	background: none;
	margin-right: 0;
	margin-left: 0;
}


/* =====================
  report
===================== */

#report > section:first-child {
	margin-top: 0;
	padding-top: 0;
}


/* =====================
  report_end
===================== */
#report_end h2.h_line_01 {
	font-size: 15px;
	margin-top: 50px;
}
section#report_end > p:first-child {
	margin-top: 40px;
}
p.report_end_caution {
	font-size: 11px;
	margin-top: 50px;
}


/* =====================
  sp_recommend
===================== */

#sp_recommend ul,
ul.sp_recommend {
	/*display: flex;*/
	justify-content: space-between;
	margin-top: 40px;
}
p + ul.sp_recommend {
	margin-top: 20px;
}
#sp_recommend ul li,
ul.sp_recommend li {
	width: 100%;
	margin: 30px 0 0;
}
#sp_recommend ul li:first-child,
ul.sp_recommend li:first-child {
	margin-top: 0;
}
ul.sp_recommend li.li_center {
	margin: 15px auto 0;
	width: 90%;
}
#sp_recommend ul li:first-child {
	margin-top: 5px;
}
#sp_recommend a,
ul.sp_recommend a {
	display: flex;
}
#sp_recommend ul li img,
ul.sp_recommend li img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-right: 20px;
}
#sp_recommend ul li h3,
ul.sp_recommend li h3 {
	display: inline-block;
	align-self: center;
	font-size: 13px;
	text-align: left;
	margin: 0;
}


/* =====================
  visumo調整
===================== */
/* プレビューのユーザー名リンク */
.ecbn-selection-preview-personal-link.vsm-selection-preview-personal-link a {
	background: linear-gradient(transparent 75%, #fedddc 75%);
	color:#333;
}



/* =====================
  vol.6 
===================== */

.sp_mid_sprt.repo_vol_6 #step_key h4 {
	margin-bottom: 20px;
}

/*  key color 
------------------------*/
#key_color h5 {
	font-size: 14px;
}
#key_color ul {
  box-sizing: border-box;
}
#key_color ul li {
	width: 45%;
	margin: calc(calc(10% / 2) / 2);
	text-align: left;
}
@media screen and (min-width: 451px) {
	#key_color ul li {
		width: 31%;
		margin: calc(calc(7% / 3) / 2);
		padding: 5px 0;
	}
}
@media screen and (min-width: 631px) {
	#key_color ul li {
		width: 22%;
		margin: calc(calc(9% / 4) / 2);
		padding: 5px 0;
	}
}

#key_color ul li img {
	width: 15px;
	vertical-align: text-top;
	margin-top: 2px;
}
#key_color ul li p {
	display: inline-block;
	margin: 0;
	font-size: 13px;
	/*letter-spacing: 0;*/
}
#key_color .more {
	margin-top: 20px;
	margin-bottom: 40px;
}
#key_color .more a {
	color: #f1a08e!important;
	font-weight: bold;
}



/* ======================================================

  記事一覧ページ

	.articles_page

====================================================== */

.articles_page #top_report {
	margin-top: 40px;
}

.articles_page #main_first h1 {
	margin-top: 25px;
	margin-bottom: -15px;
}
.sp_mid_sprt.articles_page h2 {
	margin-top: 30px;
}