﻿@charset "utf-8";
/* かおり道CSS */

.topGroupName{width: 100%;}
#commonWrapper {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;
	}
@media screen and (max-width: 899px) {
	#commonWrapper{
		padding: 0 2%;
		}
	}
#commonWrapper a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	color: #7f581a;
	text-decoration: underline;
	}
#commonWrapper div,
#commonWrapper h3,
.flexOut {
	text-align: left;
	}
.h3noneBox {margin-top: 2em !important;}
.mt1 {margin-top: 1em !important;}
.pink1{
	color: #FF5BAD;
	font-weight: bold;
	}
.pink2{
	color: #FF5BAD;
	font-weight: bold;
	}
.pinkS {
	color: #FF5BAD;
	font-size: 14px;
	}
span.pinkS {display: block;}
.bold {font-weight: bold;}
.small {
	font-size: 14px;
	}

.indent {padding-left: 1em !Important;}
h1 {
	margin: 3em 0 2em;
	}
h1 img {width: 100%;}
h2 {
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.5rem;
	margin-top: 1em;
	}
h2 {
  position: relative;
  padding: 0.25em 0;
}
h2:after {
  content: "";
  display: block;
  height: 15px;
    background: -webkit-linear-gradient(to right, #fff, #cefca4, #c0ecb8, transparent);
    background: linear-gradient(to right, #fff, #cefca4, #c0ecb8, transparent);
    margin-top: -10px;
}
sub {
    vertical-align: sub !important;
    font-size: 60% !important;
}

h2 sub {
    vertical-align: 0 !important;
}

@media screen and (max-width: 769px){
	h2,p.pink1 {text-align: left;}
	}

#vol1 h2,#vol2 h2 {text-align: center;}
h3 {
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.3rem;
	margin: 1em 0 0.5em;
	color: #FF5BAD;
	}
@media screen and (min-width: 770px){
	h3 {margin-top: 2em;}
	}
.minTitle {
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.3rem;
	}
.minText {
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}

.flexCont,
.tileCont {
	display: flex;

	}
.tileCont {
	flex-wrap: wrap;
	justify-content: space-between;
	}
.tileCont div {
	width: 20%;
	margin-bottom: 1em;
	font-size: 12px;
	padding: 0 2.89%;
	}
.tileCont a {
    display: block;
	}

@media (max-width: 799px) and (min-width: 700px) {
	.tileCont div {width: 25%;}
	}

@media (max-width: 699px) and (min-width: 600px){
	.tileCont div {width: 33%;}
	}
@media screen and (max-width: 599px){
	.tileCont div {width: 50%;}
	}

.imgCont {
	flex : none;
	max-width: 350px;
	}
.textCont p {
	margin-bottom: 1em;
	}
#commonWrapper .navi {
	display: flex;
	justify-content: space-between;
	margin: 2em 0 1em;
	font-size: 1.1rem;
	}

@media screen and (min-width: 770px){
	.imgCont {padding-left: 1em;}
	}

@media screen and (max-width: 769px){

	.flexCont {
		flex-wrap: wrap;
		flex-direction: column-reverse;
		}
	.imgCont {padding-bottom: 1.1em;}
	}

.boxCont {
	border: #ececec solid 10px;
	padding: 40px 35px;
	}

/* youtube */
.youtubeCont {
	display: grid;
	grid-template-columns: repeat(16, 5.625vw);
	grid-auto-rows: 5.625vw;
	margin-bottom: 1em;
	max-height: 500px;
	}

.youtube {
	grid-column: span 16;
	grid-row: span 9;
	max-width: 900px;
	max-height: 500px;
	width: 100%;
	height: 100%;
	}


/* パンくず */
#contents > div.container {display:none;}
