@charset "utf-8";

/* =====================
  共通、既存カスタマイズ
===================== */
.sp_mid_sprt {
  margin-bottom: 60px;
	text-align: center;
	color: #333;
}
.sp_mid_sprt h1,
.sp_mid_sprt h2,
.sp_mid_sprt h3,
.sp_mid_sprt h4,
.sp_mid_sprt p {
	margin: 0;
	padding: 0;
	line-height: 2;
	text-align: center;
	letter-spacing: .18em;
	margin: 30px 0;
	/*color: #333;*/
}
.sp_mid_sprt h1 {
	font-size: 28px;
	letter-spacing: .22em;
}

.sp_mid_sprt h2 {
	font-size: 26px;
	margin: 10px 0 50px;
}
.sp_mid_sprt h3 {
	font-size: 24px;
}
.sp_mid_sprt section > h3 + a > img {
	margin-top: 15px;
}
.sp_mid_sprt h4 {
	font-size: 20px;
}
#top_about_sprt h4 {
	font-size: 22px;
}
.sp_mid_sprt p {
	font-size: 17px;
	letter-spacing: .1em;
}
.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 ul {
	padding: 0;
}
.sp_mid_sprt li {
	margin: 0;
	padding: 0;
}
.sp_mid_sprt img {
	margin: 0;
	padding: 0;
	font-size: 0;
	vertical-align: top;
	width: 100%;
}
.sp_mid_sprt p + a {
	margin-top: 50px;
}

/*  h3、h4に装飾
------------------------*/

/* 装飾 */
.sp_mid_sprt h4.h_line_01,
.sp_mid_sprt h3.h_line_01,
.sp_mid_sprt h2.h_line_01 {
	font-size: 22px;
	margin: 55px 0 30px;
	align-items: center; /* 横線を上下中央 */
	display: flex; /* 文字と横線を横並び */
	justify-content: center; /* 文字を中央寄せ */
}
.sp_mid_sprt h4.h_line_01::before,
.sp_mid_sprt h4.h_line_01::after,
.sp_mid_sprt h3.h_line_01::before,
.sp_mid_sprt h3.h_line_01::after,
.sp_mid_sprt h2.h_line_01::before,
.sp_mid_sprt h2.h_line_01::after {
  background-color: #eee; /* 横線の色 */
  content: "";
  height: 2px; /* 横線の高さ */
  width: 6vw; /* 横線の長さ */
}
.sp_mid_sprt h4.h_line_01::before,
.sp_mid_sprt h3.h_line_01::before,
.sp_mid_sprt h2.h_line_01::before {
  margin-right: 3vw; /* 文字との余白 */
}
.sp_mid_sprt h4.h_line_01::after,
.sp_mid_sprt h3.h_line_01::after,
.sp_mid_sprt h2.h_line_01::after {
  margin-left: 3vw; /* 文字との余白 */
}


/*  a
------------------------*/
.sp_mid_sprt a {
	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;
	display: block;
}
.sp_mid_sprt a:hover {
	color: #777;
	text-decoration: none;
}
.sp_mid_sprt a.marker,
.sp_mid_sprt a .marker {
	background: linear-gradient(transparent 75%, #fedddc 75%);
	font-weight: bold;
	display: inline;
}

/* a  画像フェードインアウト
------------------------*/
.sp_mid_sprt a:hover 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: 14px;
  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;
}

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

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

/*  ul li 黒丸インデント
------------------------*/
ul.cercle_indent li {
  text-indent: -1.5em;
  padding-left: 1em;
	font-size: 16px;
	line-height: 2;
	margin-top: .5em;
	letter-spacing: .1em;
	width: 100%;
	text-align: left;
}

ul.cercle_indent li::before {
  content: '・';
}
div.bgcolor ul.cercle_indent + p {
	margin-top: 1.5em;
}

/*  ol li インデント
------------------------*/
.sp_mid_sprt div.bgcolor ol li {
	text-indent: -1.5em;
  padding-left: 1.5em;
	font-size: 16px;
	line-height: 2;
	margin-top: .5em;
	letter-spacing: .1em;
	width: 100%;
	text-align: left;
}
div.bgcolor ol + p {
	margin-top: 1.5em;
}


/*  visibility
------------------------*/
.sp_mid_sprt .visibility {
	visibility: hidden;
	margin: 0;
}

/*  グループ
------------------------*/

.sp_mid_sprt .line_01,
.sp_mid_sprt div#report_end {
	margin: 100px 0 70px;
	/*color: #333;*/
}

/* 区切り線 タイプ1 */
.sp_mid_sprt .line_01 {
	position: relative;
}
.sp_mid_sprt .line_01:before {
	background: url(/sp/midori_supporter/img/line.jpg) repeat;
	content:"";
	display:inline-block;
	width: 760px;
	height: 7px;
	background-size:contain;
	margin: 0 50px 50px;
}
.sp_mid_sprt .line_01.side_margin:before {
	margin: 0 0 50px;
}

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

/*  side_margin
------------------------*/
.sp_mid_sprt .side_margin {
	margin-left: 50px;
	margin-right: 50px;
}
.sp_mid_sprt .side_margin .side_margin p {
	font-size: 16px;
}

/*  スライド
------------------------*/
.slide_show {
	margin: 0 auto;
	position: relative;
}
.slide_show img {
	position: absolute;
	top: 0;
	left: 0;
}
/* スライドカスタマイズ */
.slide_show {
	width: 860px;
	height: 499px;
}
.slide_show img {
	display: none;
}

/*  インビューアニメーション
------------------------*/
.sp_mid_sprt .sa {
	opacity: 0;
	transition: all 2s 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;
	line-height: 5.2em;
	margin: -15px auto 50px;
}
.sp_mid_sprt .more a {
	width: 70%;
	margin: 0 auto;
	display: block;
	border: 1px solid #bbb;
	font-size: 15px;
	box-sizing: border-box;
	letter-spacing: 1.5!important;
	border-radius: 6px;
	color: #444!important;
}
.sp_mid_sprt .more a:hover {
	border: 1px solid #999;
	color: #999!important;
	background-color:#f2f2f2;
}

.sp_mid_sprt .close {
	position: relative;
	line-height: 5.2em;
	margin: 30px auto 50px;
}
.sp_mid_sprt .close a {
	width: 70%;
	margin: 0 auto;
	display: block;
	border: 1px solid #bbb;
	font-size: 15px;
	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: 50px;
}

/*  背景色 bgcolor
------------------------*/

div.bgcolor {
	background-color: #fcf8f4;
	border-radius: 25px;
	padding: 30px 40px;
	margin-top: 30px;
}
div.bgcolor p {
	text-align: left;
	font-size: 16px;
	margin: 0;
}
div.bgcolor h3 {
	font-size: 18px;
	margin: 0 0 20px;
}
div.bgcolor h4 {
	font-size: 18px;
	margin: 0 0 .8em 0;
}

div.bgcolor h5 {
	font-size: 18px;
	margin: 0 0 15px 0;
}

p + div.bgcolor,
div.bgcolor + p,
div.bgcolor + div.bgcolor {
	margin-top: 50px;
}
img + div.bgcolor {
	margin-top: 30px;
}



/* =====================
  main_first
===================== */
#main_first {
	margin-top: 0;
}
#main_first .main_message {
	margin: 48px auto 0;
}


/* =====================
  メニュー
===================== */
section#top_menu {
	margin-bottom: -70px;
	margin-top: 70px;

}
#top_menu .side_margin {
	margin: 0 120px;
}

#top_menu ul li {
	position: relative;
	margin-right: 55px;
}
#top_menu ul li:nth-child(3n) {
	margin-right: 0;
}
#top_menu ul li a {
  /*color: #333;*/
  display: block;
	width: 170px;
	padding-bottom: 1.3em;
  transition: all .2s linear;
}
#top_menu ul li a p {
	margin: 0;
	padding-top: .8em;
	font-weight: bold;
}
#top_menu ul li a img {
	width: 100%;
}

/* 準備中*/
#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 ul {
	margin-top: 45px;
}
#top_report ul li {
	position: relative;
	width: 365px;
	margin: 0 30px 0 0;
}
#top_report ul li:nth-child(2n) {
	margin-right: 0;
}
#top_report ul li:nth-last-child(n+3){
	margin-bottom: 50px;
}
#top_report ul li img {
	width: 100%;
	margin-bottom: 12px;
}
#top_report ul li h3 {
	font-size: 17px;
	font-weight: bold;
	text-align: left;
	margin: 0;
}
#top_report ul li p {
	font-size: 15px;
	margin: 5px 0 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: 60px auto 0;
}

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

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

#top_about_sprt h3 {
	margin: 40px 0 30px;
}
#top_about_sprt h4 {
	font-size: 20px;
	margin: 60px 0 30px;
}

/*  こんなことやってます
------------------------*/
#top_about_sprt .sprt_about img {
	width: 100%;
}

.sprt_about ul {
	/*display: flex;*/
	margin: 30px 0;
	justify-content: center;
}
.sprt_about ul li {
	width: 320px;
	font-size: 16px;
	/*font-weight: bold;*/
	padding: 20px 0;
	border-bottom: 2px solid #f9f4ee;
	line-height: 2;
	display: flex;
  align-items: center;
	justify-content: center;
}
.sprt_about ul li:nth-child(odd) {
	margin-right: 40px;
}
.sprt_about ul li:nth-child(odd):last-child {
	margin-right: 0;
	margin-top: 10px;
}
.sprt_about ul li:last-child {
	border-bottom: none;
}

/*  サポーターのみなさん
------------------------*/

#sprt_member {
	margin-top: -30px;
}

#sprt_member ul {
	/*display: flex;*/
	justify-content: center;
}
#sprt_member li{
	text-align: left;
	width: 45%;
	margin-right: 8%;
	word-break: break-all;
}
#sprt_member li:first-child { /* 日付の所 */
	width: 100%;
	margin-bottom: 30px;
	text-align: center;
}
#sprt_member li:nth-child(odd) {
	margin-right: 0;
}
#sprt_member li a {
	width: 100%;
	display: flex;
	margin: 20px 20px 20px 0;
}
#sprt_member li img {
	width: 80px;
	height: 80px;
}
#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: 15px;
	text-align: left;
	margin: 0;
}


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


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

/* インスタ紹介ボタン */
a.insta_info_btn{
  padding: 0.5em;
  margin: 50px auto 0 -20px;
  display: inline-block;
  font-weight: bold;
  font-size:19px;
}
a.insta_info_btn:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -3px 20px 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:hover {
	color: #333;
	cursor: pointer;
	opacity: .6;
}


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

  レポートページ
	.repo_page

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

/*  ミドリサポーター ロゴ
------------------------*/
a.logo_for_top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: fit-content;    
  margin: 20px auto;     
}

/* 矢印アイコン*/
a.logo_for_top::before {
  content: "";
  display: inline-block;
  width: calc(54px * 0.25);
  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: 30px;
  flex-shrink: 0;
}
/* */

a.logo_for_top img {
  width: 250px;  
  height: auto;
	margin-right: calc(54px * 0.25 + 30px);
}

a.logo_for_top p {
  width: 100%;
  margin: 20px 0 0 0; 
	font-size: 15px;  
  text-align: center; 
}


/*  main_message
------------------------*/
.main_message h2 {
	margin-top: 50px;
	margin-bottom: 30px;
}

/*  サポーターさんプロフィール
------------------------*/

a.supporter {
	width: 100%;
	display: flex;
	margin: 30px 20px 30px 0;
	justify-content: center;
}
a.supporter img {
	width: 120px;
	height: 120px;
}
a.supporter img.ico_ig {
	width: 29px;
	height: 29px;
	align-self: center;
	margin: 0 15px 0 30px;
}
a.supporter p {
	align-self: center;
	font-weight: bold;
	font-size: 20px;
	text-align: left;
}
a.supporter p span {
	font-size:13px;
	font-weight: normal;
	display: inline-block;
}
a.supporter + p {
	margin: 50px 0;
}
.bgcolor + a.supporter {
	margin-top: 50px;
}

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

.sp_mid_sprt div.qa p {
	text-align: left;
	line-height: 2.1;
	letter-spacing: .1em;
	text-align: justify;
}

.sp_mid_sprt p.qa_q {
	font-size: 18px;
	font-weight: bold;
	margin-top: 40px!important;
	padding: 0;
}
.sp_mid_sprt p.qa_q:first-child {
	padding-top: 30px;
}
.sp_mid_sprt p.qa_a span {
	font-size: 24px;
	font-weight: bold;
	margin-right: .3em;
	color: #f1a08e;
	line-height: 0;
}
.sp_mid_sprt div.qa + p {
	margin: 50px 30px 0;
	text-align: left;
}



/* article_point
------------------------*/
.article_point h3 {
  margin-top: 50px;
}
.article_point p {
	margin-top: 30px;
	text-align: left;
}

/* PCのみ 2カラム画像 */

.pc_2column {
	text-align: left;
	display: flex;
	margin-top: 50px;
}
.pc_2column img {
	width: 320px;
	margin-right: 14px;
	display: inline-block;
}
.pc_2column img:nth-of-type(2n) {
	margin-right: 0;
}
.pc_2column img:nth-of-type(n+3) {
	margin-top: 30px;
}


/*  article_item
------------------------*/
.article_item h3 {
	font-size: 20px;
	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: 6vw; /* 横線の長さ */
}
.article_item h3::before {
  margin-right: 3vw; /* 文字との余白 */
}
.article_item h3::after {
  margin-left: 3vw; /* 文字との余白 */
}

.article_item ul {
	/*display: flex;*/
	justify-content: space-around;
}
.article_item ul li {
	width: 205px;
	margin-top: 30px;
}
.article_item ul li:nth-child(-n+3){
	margin-top: 0;
}
.article_item li h4 {
	font-size: 14px;
	font-weight: normal;
	margin-top: 10px;
}
.article_item ul li img {
	width: 100%;
}

.article_item.item_h3 ul {
	margin-top: 60px;
}
.article_item.item_h3 li h3 {
	font-size: 14px;
	font-weight: normal;
	margin: 10px 0 0 0 !important;
	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_end h2.h_line_01 {
	font-size: 20px;
	margin-top: 70px;
}
section#report_end > p:first-child {
	margin-top: 20px;
}
p.report_end_caution {
	font-size: 13px;
	margin-top: 50px;
}


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

#sp_recommend ul,
ul.sp_recommend {
	/*
	justify-content: space-between;
	*/
	flex-wrap: wrap;
}
#sp_recommend ul li,
ul.sp_recommend li {
	width: 360px;
	margin: 20px 0;
}
#sp_recommend ul li:nth-child(2n),
ul.sp_recommend li:nth-child(2n) {
	margin-left: 40px;
}
#sp_recommend ul li:nth-last-child(-n+2),
ul.sp_recommend li:nth-last-child(-n+2){
	margin-bottom: 0;
}
ul.sp_recommend li.li_center {
	margin: 20px auto 0;
}
#sp_recommend a,
ul.sp_recommend a {
	display: flex;
}
#sp_recommend ul li img,
ul.sp_recommend li img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	margin-right: 20px;
}
#sp_recommend ul li h3,
ul.sp_recommend li h3 {
	display: inline-block;
	align-self: center;
	font-size: 15px;
	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 
===================== */

/*  key color 
------------------------*/

#key_color h5 {
	font-size: 17px;
	margin-bottom: -10px;
}
#key_color ul {
	/*background-color: #ffffe7;*/
  box-sizing: border-box;
	justify-content: center;
}
#key_color ul li {
	width: 22%;
	margin: calc(calc(9% / 4) / 2);
	padding-top: 20px;
}

#key_color ul li img {
	width: 10%;
	vertical-align: top;
}
#key_color ul li p {
	display: inline-block;
	margin: 0;
	margin-top: -.5em;
	font-size: 15px;
	width: 85%;
}
#key_color .more {
	margin-top: 40px;
}
#key_color .more a {
	color: #f1a08e!important;
	font-weight: bold;
}

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

  記事一覧ページ

	.articles_page

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

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

.articles_page #main_first h1 {
	margin-top: 40px;
	margin-bottom: -20px;
	font-size: 26px;
}
.sp_mid_sprt.articles_page h2 {
	font-size: 23px;
	margin-top: 0;
}