﻿@charset "UTF-8";

/*
  font-family: 'Mulish', "メイリオ", arial, helvetica, clean, sans-serif;
*/

/*トップページ*/



@media screen and (min-width: 561px) {}

@media screen and (max-width: 560px) {}


/*アミナフライヤーズ設定ーーーーーーーーーーーーーーーーーーーーーーー*/
/*基本設定*/
.column_inner{
    padding-top: 25px;
    font-family: "Verdana", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
	font-size: 1.5rem;
    text-align: justify;
    font-weight: 500;
}
.column_inner figcaption{
	font-size: 1.2rem;
	margin-top: 10px;
}
.column_inner img{
vertical-align: bottom;
}
.column_inner h2{
	font-size: 2.4rem;
}
.column_inner h3{
	font-size: 2rem;
	margin: 80px 0 20px;
}
.column_inner h4{
	font-size: 1.8rem;
	margin: 50px 0 10px;
}
.column_inner a{
	transition: 0.2s;
}
.column_inner a:hover{
	opacity: 0.8;
	text-decoration: none;
}
.cut{
	display: none;
}
.column_img{
    text-align: center;
    margin: 50px auto;
}
.text_center p{
	text-align: center;
	font-weight: bold;
}
.column_textbox{
		margin: 50px auto;
		font-size: 1.4rem;
	}
	.column_textbox dt{
		font-weight: bold;
    	padding: 0.2em 1.2em;
    	display: inline-block;
    	color: #fff;
    	background-color: #30376C;
	}
	.column_textbox dd{
    	background-color: rgba(255,255,255,0.8);
    	padding: 1em;
    	border: 2px solid #30376C;
	}
/*目次ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.column_mokuji{
		background-color: rgba(255,255,255,0.8);
		padding: 30px;
		margin: 50px auto;
	}
	.column_mokuji h3{
		margin: 0 0 20px 0;
		border-bottom: 4px double;
		letter-spacing: 0.2em
	}
	.column_mokuji ul li a{
		text-decoration: none;
	}
	.column_mokuji ul{
		font-size: 1.3rem;
	}
	.column_mokuji ul li{
		margin-bottom: 0.3em;
	}
	.column_mokuji_02,.column_mokuji ul li ul{
		margin-left: 30px;
		margin-bottom: 1em;
	}
	.column_mokuji_02_in,.column_mokuji_01_in,.column_mokuji ul li{
		position: relative;
		padding-left: 15px;
	}
	.column_mokuji_01_in::before,.column_mokuji ul li::before{
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		background: #000;
		border-radius: 50%;
		top: 9px;
		left: 0;
	}
	.column_mokuji_02_in::before,.column_mokuji ul li ul li::before{
		position: absolute;
		content: "";
		width: 8px;
		height: 8px;
		border: 1px solid;
		border-color: #000 #000 transparent transparent;
		transform: rotate(45deg);
		top: 9px;
		left: 0;
		background: none!important;
    	border-radius: initial!important;
	}


  /*目次アコーディオン*/    
  .cp_box *, .cp_box *:before, .cp_box *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .cp_box {
    position: relative;
  }
  .cp_box label {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 80px; /* グラデーションの高さ */
    cursor: pointer;
    text-align: center;
    /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
    background: linear-gradient(to bottom, rgb(247 249 251 / 40%) 0%, rgb(255 255 255 / 80%) 90%);
  }
  
  .cp_box input:checked + label {
    background: none; /* 開いた時にグラデーションを消す */
  }
  .cp_box label:after {
    line-height: 2.5rem;
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 50%;
    width: 16rem;
    content: '\f13a' ' 開く';
    font-family: FontAwesome;
    transform: translate(-50%, 0);
    letter-spacing: 0.05em;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 20px;
    background-color: rgb(255 255 255);
  }
  
  .cp_box input {
    display: none;
  }
  .cp_box .cp_container {
    overflow: hidden;
    height: 330px; /* 開く前に見えている部分の高さ */
    transition: all 0.5s;
  }
  .cp_box input:checked + label {
    /* display: none ; 閉じるボタンを消す場合解放 */
  }
  .cp_box input:checked + label:after {
    content: '\f139'' 閉じる';
    font-family: FontAwesome;
  }
  .cp_box input:checked ~ .cp_container {
    height: auto;
    padding-bottom: 70px; /* 閉じるボタンのbottomからの位置 */
    transition: all 0.5s;
  }
  /*目次アコーディオン*/  

/*プロフィール部分ーーーーーーーーーーーーーーーーーーーー*/
.profile_box{
	display: flex;
	align-items: center;
	margin-top: 50px;
}
.profile_box_img{
	margin-right: 30px;
}
.profile_box_img img{
	max-width: none;
	width: 200px;
	height: auto;
	border-radius: 50%;
}
.profile_box_text h3{
	margin: 0 0 1em 0;
}
.profile_box_text p{
	font-size: 1.4rem;
}
.column_sns{
		display: flex;
		margin-top: 10px;
		align-items: center;
	}
	.column_sns li{
		margin-right: 10px;
	}
	.column_sns li img{
		width: 35px;
		height: auto;
	}
/*ボタン設定ーーーーーーーーーーーーーーーーーーーーーーー*/
.column_inner .button002 {
	text-align: right;
	margin: 20px 0;
}
.column_inner .button002 a {
	position: relative;
	padding: 0.8em 4em 0.8em 2em;
	width: auto;
	color: #fff;
	background-color: #30376C;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	}
.column_inner .button002 a::before,.column_inner .button002 a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.5em;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transition: 0.1s;
}
.column_inner .button002 a::after {
  right: calc(1.5em + 5px);
}
.column_inner .button002 a:hover::before {
  right: 1.8em;
}
.column_inner .button002 a:hover::after {
  right: calc(1.8em + 5px);
	}


/*関連記事ーーーーーーーーーーーーーーーーーーーーーーー*/

.related_articles_title{
	text-align: center;
	font-weight: 600;
  border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 10px 0;
}

.related_articles_wp{
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
	border-bottom: 1px solid #333;
}


.related_articles_wp .related_articles_column{
	display: flex;
}

.related_articles_wp .related_articles_column:first-child{
	background:
	linear-gradient(to bottom, #231815, #231815 4px, transparent 5px, transparent 5px) repeat-y right top / 1px 10px;
	padding-right:25px;
}

.related_articles_wp .related_articles_column .related_articles_column_txt{
	width: 220px;
	margin-left: 10px;
}


.related_articles_wp .related_articles_column .related_articles_column_txt a{
	text-decoration:none;
}

.related_articles_wp .related_articles_column .related_articles_column_txt .column_subtitle{
	font-size: 1.4rem;
}

.related_articles_wp .related_articles_column .related_articles_column_title{
	font-size: 1.6rem;
	line-height: 1.6;
	margin-top: 0.4em;
	font-weight: bold;
}

/*関連記事↑ーーーーーーーーーーーーーーーーーーーーーーー*/


/*雑学ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.trivia_wp{
	margin: 4em auto; /* ボックスの余白 */
	background-color: #f5f5f5; /* ボックス背景色 */
	padding:1.5em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
}
.trivia_wp .trivia-title {
	background-color: rgb(255 253 235);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
	transform: rotate(356deg);/*テープの傾き*/
	font-size: 1.1em;/*タイトル文字の大きさ*/
	color: #000000; /*タイトル文字色 */
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/*配置(ここを動かす)*/
	top:-25px; /*上から（-10px）移動*/
	left: -15px; /*左から(20px)移動*/
	z-index: 2;
}


.trivia_wp_02 {
  position: relative;
  border-top: solid 5px  #ff5f16;
  border-bottom: none;
  background: rgba(255,255,255,0.8);
  padding: 0.4em 0.5em;
  font-size: 1.8rem;
}

.trivia_wp_02:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 600;
  content: '\f0eb 豆知識';
  background:  #ff5f16;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 8px 16px ;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.3em;
}



/*見出しまとめーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*背景白に下線を引いた定番デザインーーーーーーーーーーーーーーーーーーーーーーー*/
.column_midashi001{
	    padding: 0.5em 1em;
    margin: 80px 0 20px;
    background-color: rgba(255,255,255,0.8);
    border-bottom: 5px solid;
}

/*.column_midashi002　は以前目設定していた。目次の文字の横に四角を入れていた*/

/*　文字と数字が横並びになる、h2の質問デザイン
【　https://aminaflyers.amina-co.jp/list/detail/449　】ーーーーーー　*/
.column_midashi003{
		display: flex;
		margin: 50px 0 20px;
	}
	.column_midashi003_left{
		margin: auto 0;
		white-space: nowrap;
	}
	.column_midashi003_left p{
		font-weight: bold;
		font-size: 3em;
		margin-bottom: 0;
	}
	.column_midashi003_right{
		border-left: 3px solid;
		padding: 1.2em 0 1.2em 20px;
		margin: auto 0 auto 20px;
	}
	.column_midashi003_right h2{
		font-weight: bold;
		font-size: 20px;
	}
/*質問の時などに使う、文字の左側に棒線を引くデザインーーーーーーーーーーーーーーーーーーーーーーー*/
.column_midashi004{
		font-weight: bold;
    	margin: 3.2em 0 -1em 0!important;
    	position: relative;
    	padding-left: 3.5em;
	}
	.column_midashi004::before{
		position: absolute;
    	top: 0.9em;
    	left: 0;
    	content: "";
    	background: #000;
    	width: 3em;
    	height: 1px;
	}
/*文字の横に縦線で区切りをつけるデザインーーーーーーーーーーーーーーーーーーーーーーー*/
.column_midashi005{
	position: relative;
	padding: 0.3em 1em;
}
.column_midashi005::before{
	position: absolute;
	content: "";
	background: #000;
	width: 5px;
	height: 100%;
	top: 0;
	left: 0;
}
/*黄色のマーカー風デザインーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.marker_01{
	background: linear-gradient(transparent 60%,#fff070 40%);
    font-weight: bold;
}   
.column_midashi006{
		margin-top: 80px;
	text-align: center;
	}
	.column_midashi006 span{
		background: linear-gradient(transparent 60%, #ff070 40%);
		padding: 0 0.8em;
	}
	
/*リストデザイン----------------------------------------*/
	.column_list01,.column_list02,.column_list03,.column_list04{
		margin: 50px auto;
	}
	.column_list01 li,.column_list02 li,.column_list03 li,.column_list04 li{
		position: relative;
		padding-left: 1.2em;
	}
	.column_list01 li::before,.column_list02 li::before,.column_list03 li::before{
		position: absolute;
		top: 0;
		left: 0;
	}
	.column_list04 li::before{
		position: absolute;
		top: 0.05em;
		left: 0;
	}
	.column_list01 li::before{
		content: "・";
	}
	.column_list02 li::before{
		content: "※";
	}
	.column_list03 li:nth-child(1)::before{
		content: "1."
	}
	.column_list03 li:nth-child(2)::before{
		content: "2."
	}
	.column_list03 li:nth-child(3)::before{
		content: "3."
	}
	.column_list03 li:nth-child(4)::before{
		content: "4."
	}
	.column_list03 li:nth-child(5)::before{
		content: "5."
	}
	.column_list03 li:nth-child(6)::before{
		content: "6."
	}
	.column_list03 li:nth-child(7)::before{
		content: "7."
	}
	.column_list03 li:nth-child(8)::before{
		content: "8."
	}
	.column_list04 li:nth-child(1)::before{
		content: "①"
	}
	.column_list04 li:nth-child(2)::before{
		content: "②"
	}
	.column_list04 li:nth-child(3)::before{
		content: "③"
	}
	.column_list04 li:nth-child(4)::before{
		content: "➃"
	}
	.column_list04 li:nth-child(5)::before{
		content: "⑤"
	}
	.column_list04 li:nth-child(6)::before{
		content: "➅"
	}
	.column_list04 li:nth-child(7)::before{
		content: "⓻"
	}
	.column_list04 li:nth-child(8)::before{
		content: "⑧"
	}

/*神社百選ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.jinjya_data{
		display: flex;
		justify-content: space-between;
	align-items: baseline;
		flex-wrap: wrap;
	    margin: 50px 0;
	}
.jinjya_data dl{
	width: 45%
} 
	.jinjya_data dl dt{
		border-bottom: 4px double #777;
		margin-bottom: 10px;
		font-weight: bold;
	}
.jinjya_data_img {
	text-align: center;
}
/*神社百選ーーーーーーーーーーーーーーーーーーーーーーーーーーーーここまで*/

.column_shop{
	margin: 50px 0;
}
.column_shop .column_hover{
	text-align: center;
	margin-bottom: 20px;
}
.column_img_flex02{
		display: flex;
		justify-content: space-between;
	　　margin: 50px 0;
	}
	.column_img_flex02 li{
		width: calc(100% / 2 - 10px);
	}
.detail_title{
	font-weight: bold;
		padding: 0.4em 1.2em 0.2em;
		display: inline-block;
		color: #fff;
		background-color: #30376C;
	margin-top: 50px!important;
	font-size: 1.3rem;
	letter-spacing: 0.1em;
}
.detail_box{
	font-size: 1.3rem;
		margin-bottom: 50px;
		background-color: rgba(255,255,255,0.8);
		padding: 1.5em;
		border: 2px solid #30376C;
}
.detail_box li{
	display: flex;
	align-items: center;
}
.detail_img{
	margin-right: 30px;
	width: 5vw;
}
.detail_box p{
	font-size: 1.4rem;
}
.column_video{
		position: relative;
     	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    	height: 0;
     	overflow: hidden;
	margin: 50px 0;
	}
	.column_video iframe {
     	position: absolute;
     	top: 0;
     	left: 0;
     	width: 100%;
     	height: 100%;
	}
/*商品を横並びに三個並べます。スマホでは2こです！！！*/
.column_goodslist{
		display: grid;
 		width: 100%;
    	grid-template-columns: auto auto auto;
    	column-gap: 3%;
		row-gap: 50px;
		font-size: 0.8em;
		margin: 50px 0;
	}
	.column_goodslist li .button002{
		text-align: center;
	}
	.column_goodslist li h4{
		margin: 20px 0 5px;
		font-size: 1.3rem;
	}
.column_lineup{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 50px 0;
		}
		.column_lineup_box li{
			margin-bottom: 50px;
		}
		.column_lineup_box .column_lineup{
			margin: inherit;
		}
		.column_lineup_box .column_lineup div:last-child{
			flex: 1;
			margin-left: 2em;
		}
@media screen and (max-width: 560px) {
	.column_inner{
		letter-spacing: -0.01em;
        font-size:1.45rem;
	}
	.cut{
	display: block;
}
	.cut_reverse{
	display: none;
}
	.text_center p{
	text-align: justify;
}
	.text_center p br{
	display: none;
}
	.column_inner h2{
	font-size: 1.8rem;
}
.column_inner h3,.column_inner h4{
	font-size: 1.7rem;
}
	.profile_box_img{
	margin: 0 auto 30px auto;
	text-align: center;
}
    .column_inner .button002 a{
	font-size: 1.1rem;
    padding: 0.8em 3em 0.8em 1em;
	}
    .column_mokuji{
		padding: 20px;
	}
	.column_midashi003_left p{
		font-size: 1.7rem;
	}
	.column_midashi003_right{
		padding: 1.2em 0 1.2em 15px;
		margin: auto 0 auto 15px;
	}
		.column_midashi003_right h2{
		font-size: 1.6rem;
	}
	.profile_box{
	display: block;
}
	.jinjya_data{
		display: block;
	}
	.jinjya_data dl{
		width: 100%;
	}
	.jinjya_data dl:nth-child(2){
		margin-top: 30px;
	}
	.column_midashi006 span{
		padding: 0;
	}
	.detail_img{
	width: 15vw;
}
	.detail_box p{
	font-size: 1rem;
}
	.column_goodslist{
    		grid-template-columns: auto auto;
		}
	.column_lineup_box .column_lineup{
				display: block;
			}
			.column_lineup_box .column_lineup div:first-child{
				width: 100%!important;
			}
			.column_lineup_box .column_lineup div:last-child{
				flex: 1;
				margin-left: inherit;
				margin-top: 20px;
			}
}
#PageTop{
		position: relative;
	}
	#app_none{
		background-color: #7f0b00;
		width: 100%;
		position: fixed;
		top: 0px;
		z-index: 9997;
	}
	#app_none a{
		text-decoration: none;
	}
	#app_none a:hover p{
		opacity: 0.7;
	}
	#app_none p{
		color: #fff;
		padding: 0.8em;
		text-align: center;
		font-size: 1.2rem;
		transition: 0.2s;
		letter-spacing: 0.1em;
		font-family: "Verdana", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
		font-weight: bold;
	}
	#app_none p.link-outer::after{
		width: 11px;
    height: 11px;
    margin: 0 2px 0 8px;
    background: url(/cms/flyers/images/about/icon_link_outer_white.png) center no-repeat;
    background-size: contain;
	content: '';
    display: inline-block;
    position: relative;
	}
.block-header-pc-inner{
    margin-top: 30px;
}

	@media screen and (max-width: 560px){
		.block-header-sp-inner{
			top: 42px;
		}
		.block-tags{
			margin-top: 42px;
		}


		/*関連記事↓*/
		.related_articles_wp{
			display: block;
			padding: 0;
		}
		.related_articles_wp .related_articles_column{
			padding: 20px 0;
		}
		.related_articles_wp .related_articles_column:first-child{
			background: none;
			padding-right:0px;
		  background:linear-gradient(to right, #231815, #231815 6px, transparent 6px, transparent 4px) repeat-x left bottom / 10px 1px;	
		}
		.related_articles_wp .related_articles_column .related_articles_column_txt{
			width: auto;
		}
	/*関連記事↑*/


	}