@charset "UTF-8";


@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Noto+Serif+JP:400,700|Crimson+Text:400,400i,700,700i&display=swap&subset=japanese);


/* カルーセル */
@import url(css/jquery.hvSlider.css);

/* サイト共通 */
@import url(css/jquery.siteCommon.css);

/* wordpress classic editor用 */
@import url(css/wpEdit.css);

/* お問い合わせ */
@import url(css/contactForm.css);




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


	ひきたよしあき 全ページ共通 基本CSS

	@version  1.0 2020.1.14
	@author   K.Sekioka of HEVIZ Co.,Ltd.


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



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


    タグの基本設定


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

body {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	
    background-color:#ffffff;
    
	color:#231815;
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
}

img, svg {
    max-width:100%;
    height:auto;
	max-height: none;
}

a {
    color:#008fe3;
    text-decoration: none;
    transition: all 0.3s;
}
a:link,
a:visited { color:#008fe3; }
a:hover,
a:active { color:#da1b43; }

a:hover img {
    opacity: 0.8;
    transition: opacity 0.3s;
}



body.headerNav {
	padding-top: 80px;
}

.siteHeaderNav .menu dt span {
    background-color: #ffffff;
}


/** for tablet ---------------------------------- **/

@media all and (max-width:1024px) and (min-width:768px) {

	body.headerNav {
		padding-top: 140px;
	}
}

/** for Smart Phone ----------------------------- **/

@media all and (max-width:767px) {

	body.headerNav {
		padding-top: 80px;
	}
	
	body.headerNav .siteHeaderNav {
		position: absolute;
		left: auto;
		right: 0;
		top: 0;
		width: 162px;
		margin: 0;
	}
}



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


    ローディング (siteCommon拡張)


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

.siteLoading .status {
	top : 0;
	height : 10px;
}

.siteLoading .status .bar{
	background-color : #ca8d90;
}

.siteLoading .circle svg path {
    fill:#ca8d90;
}



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


	サイト共通ヘッダー (siteCommon拡張)


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

body.headerNav .siteHeader {
	height: 80px;
    padding-top: 5px;
	border-bottom: 19px solid #ca8d90;
}

.siteHeader h1 {
	width: 200px;
	margin: 0 0 0 20px;
}

.siteHeaderNav a {
	background-color: #ca8d90;
	color: #ffffff;
}
.siteHeaderNav a:link,
.siteHeaderNav a:visited {
	color: #ffffff;
}

.siteHeaderNav dt svg {
	fill: #ffffff;
}


/** Responsive for tablet --------------------------------- **/

@media all and (max-width:1024px) and (min-width:768px) {

	body.headerNav .siteHeader {
		height: 140px;
	}
	
	.siteHeader h1 {
		width: 200px;
		margin: 0 auto;
	}
}


/** Responsive for Smart Phone ---------------------------- **/

@media all and (max-width: 767px) {
	
	.siteHeaderNav ul, body.headerNav .siteHeaderNav ul {
		justify-content: flex-end;
	}
}



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


    サイト共通ナビゲーション  siteCommon.css拡張


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

/* アイコンの位置とサイズ */

.mainNav a {
	padding-left: 0;
}

.mainNav a::before {
    display: none;
}

.mainNav img {
	width: 40px;
	height: 40px;
	vertical-align: bottom;
}

.mainNav dl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.mainNav dt {
    padding: 0 5px 0 0;
}

.mainNav dd {
	line-height: 1;
	white-space: nowrap;
}

body.headerNav .siteNav {
	width: calc( 100% - 460px );
    left: 230px;
    top: 0;
    height: auto;
}

.siteNav .snsNav {
	display: none;
}



/** Responsive for tablet --------------------------------- **/

@media all and (max-width:1024px) and (min-width:768px) {

	body.headerNav .siteNav {
		width: 100%;
		left: 0;
		top: 60px;
	}
}



/* Responsive for Smart Phone ----------------------------- */

@media all and (max-width: 767px) {
	
	body.headerNav .siteNavMenu {
		display: none;
	}
	
	body.headerNav .siteNav {
		width: 100%;
		left: 100%;
		top: 0;
		height: 100%;
	}

	body.headerNav.openSiteNav .siteNav {
		left: 0;
	}
	
	body.openSiteNav .siteNavMenu {
		display: block;
	}
	
	/* 第2階層を出しっぱなしにしておく */
	.siteNav .mainNav li.hasChild > div {
		max-height: 1000px;
	}
}



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


    サイト共通フッター    siteCommon.css拡張


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

.siteFooter {
	background-color:#f5f5f5;
	color:#666666;
}

.siteFooter .contactNav svg {
	width: 30px;
	fill: #ca8d90;
}

.siteFooter .contactNav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
}

.siteFooter .contactNav li {
	margin: 0 1em;
}

.siteFooter .contactNav dl {
	display: block;
}

.siteFooter .contactNav dt {
	text-align: center;
}

.siteFooter .contactNav dd {
	margin: 5px 0 0 0;
	text-align: center;
	white-space: nowrap;
}



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


	pageTop     siteCommon.css拡張


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

.pageTop a {
    background-color: #ca8d90;
}



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


	スプラッシュ パラパラ絵


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

body.splash {
	overflow: hidden;
}

.indexSplash {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 1900;
	overflow: hidden;
}

.indexSplash .bg {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: #ffffff;
	z-index: 2001;
}


.indexSplash .logo {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54%;
	margin: 0;
	padding: 0 0 43.13135593% 0;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	z-index: 2010;
}

.indexSplash img {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: bottom;
	opacity: 0;
}

@keyframes splashMouth1 {
	0%   { opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes splashMouth2 {
	0%   { opacity: 0; }
	10%  { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes splashEng {
	0%   { opacity: 0; transform: translateX(-20px); }
	100% { opacity: 1; transform: translateY(  0px); }
}
@keyframes splashHide {
	0%   { opacity: 1; top:0; }
	99%  { opacity: 0; top:0; }
	100% { opacity: 0; top:100%; }
}
@keyframes splashImgHide {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}


.indexSplash img.mouth {
}
.indexSplash img.face    { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.mouth01 { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.mouth02 { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.mouth03 { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.mouth04 { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.mouth05 { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.mouth06 { left:17.91827331%; top:2.917228117%; width:57.20338983%; }
.indexSplash img.eng01   { left:          0%; top:78.61107427%; width:13.34745763%; }
.indexSplash img.eng02   { left:11.80702331%; top:83.76704244%; width:16.73728814%; }
.indexSplash img.eng03   { left:27.43691737%; top:81.97490716%; width:6.779661017%; }
.indexSplash img.eng04   { left:32.75298729%; top:79.66431034%; width:6.779661017%; }
.indexSplash img.eng05   { left:38.37543432%; top:83.37213528%; width:9.427966102%; }
.indexSplash img.eng06   { left:47.70855932%; top:78.99311671%; width:19.06779661%; }
.indexSplash img.eng07   { left:62.36317797%; top:86.32241379%; width:9.851694915%; }
.indexSplash img.eng08   { left:69.80945975%; top:81.41435013%; width:9.427966102%; }
.indexSplash img.eng09   { left:75.7826589%;  top:81.98306366%; width:11.22881356%; }
.indexSplash img.eng10   { left:85.78208686%; top:83.21282493%; width:10.06355932%; }
.indexSplash img.eng11   { left:94.31569915%; top:92.84229443%; width:5.720338983%; }
.indexSplash img.jpn01   { left:10.8965572%;  top:44.66844828%; width:9.851694915%; }
.indexSplash img.jpn02   { left:23.11661017%; top:43.95543767%; width:8.474576271%; }
.indexSplash img.jpn03   { left:34.18894068%; top:43.77387268%; width:9.322033898%; }
.indexSplash img.jpn04   { left:46.19233051%; top:43.94137931%; width:8.792372881%; }
.indexSplash img.jpn05   { left:58.53695975%; top:44.03122016%; width:7.415254237%; }
.indexSplash img.jpn06   { left:68.52360169%; top:43.85785146%; width:9.427966102%; }
.indexSplash img.jpn07   { left:80.63717161%; top:43.95543767%; width:8.474576271%; }


/* animation */
body.splash .indexSplash {
	animation: splashHide 0.5s linear 11s 1 forwards;
}

body.splash .indexSplash img.face    { animation: splashMouth2 1.1s linear 0s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.mouth01 { animation: splashMouth1 1.1s linear 1s 1 forwards; }
body.splash .indexSplash img.mouth02 { animation: splashMouth1 1.1s linear 2s 1 forwards; }
body.splash .indexSplash img.mouth03 { animation: splashMouth1 1.1s linear 3s 1 forwards; }
body.splash .indexSplash img.mouth04 { animation: splashMouth1 1.1s linear 4s 1 forwards; }
body.splash .indexSplash img.mouth05 { animation: splashMouth1 1.1s linear 5s 1 forwards; }
body.splash .indexSplash img.mouth06 { animation: splashMouth2 1.1s linear 6s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }

body.splash .indexSplash img.eng01 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.50s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng02 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.55s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng03 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.60s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng04 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.65s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng05 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.70s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng06 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.75s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng07 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.80s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng08 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.85s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng09 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.90s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng10 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 6.95s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }
body.splash .indexSplash img.eng11 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 7.00s 1 forwards, splashImgHide 0.2s linear 8s 1 forwards; }

body.splash .indexSplash img.jpn01 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.30s 1 forwards; }
body.splash .indexSplash img.jpn02 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.35s 1 forwards; }
body.splash .indexSplash img.jpn03 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.40s 1 forwards; }
body.splash .indexSplash img.jpn04 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.45s 1 forwards; }
body.splash .indexSplash img.jpn05 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.50s 1 forwards; }
body.splash .indexSplash img.jpn06 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.55s 1 forwards; }
body.splash .indexSplash img.jpn07 { animation: splashEng 0.3s cubic-bezier(.02,2.05,.73,.43) 8.60s 1 forwards; }

body.ready .indexSplash {
	display: none;
}













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



	NEWS詳細用



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


/** ---------------------------------------------------------------------------


    モーダルウィンドウ


------------------------------------------------------------------------------- **/

.newsModal {
    display: block;
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index:1500;
}

.newsModal .bg {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color:rgba(0,0,0,0.9);
    cursor: pointer;
}

.newsModal .win {
    display: block;
    position: absolute;
    left: 50%;
    top : 50%;
    width: 80%;
    height: auto;
    max-height: 80%;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
    
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    
    background-color:#ffffff;
    transform: translate(-50%, -50%);
}

.newsModal .close {
    display: block;
    position: absolute;
    right: 20px;
    top:20px;
    margin: 0;
    padding: 0;
}

.newsModal .close a {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    
    text-align: left;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}
.newsModal .close a::before,
.newsModal .close a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top:50%;
    width: 100%;
    height: 2px;
    margin: 0;
    padding: 0;
    background-color:#ffffff;
    transition:all 0.3s;
}
.newsModal .close a::before { transform: rotate( 45deg); }
.newsModal .close a::after  { transform: rotate(-45deg); }

.newsModal .close a:hover::before,
.newsModal .close a:hover::after {
    background-color:#ffcccc;
}



/** ---------------------------------------------------------------------------


    詳細Article


------------------------------------------------------------------------------- **/

.newsDetail {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

.newsDetail .flx {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.newsDetail .flx > .left {
    display: block;
    position: relative;
    width: 20%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.newsDetail .flx > .right {
    display: block;
    position: relative;
    width: 75%;
    margin: 0 0 0 5%;
    padding: 0 0 0 5%;
    box-sizing: border-box;
    
    border-left:2px solid #EAA7CE;
}

.newsDetail header h1 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
}

.newsDetail header .date {
    margin: 0;
    padding: 0;
    font-size:12px;
}

.newsDetail .content {
    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
    border-top:1px solid #f0f0f0;
}



/** アニメーション ----------------------------------------------- **/

/* before */
.newsModal {
    top:100%;
    transition-property: all;
    transition-duration: 0.1s;
    transition-timing-function: ease-in;
    transition-delay: 1s;
}

.newsModal .bg {
    opacity: 0;
    transform: translate(0%, 20%);
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    transition-delay: 0.5s;
}

.newsModal .win {
    opacity: 0;
    transform: translate(-50%, -30%);
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}

.newsModal .close {
    opacity: 0;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}


/* after */
body.openNewsModal .newsModal {
    top:0;
    transition-delay: 0s;
}

body.openNewsModal .newsModal .bg {
    opacity: 1;
    transform: translate(0%, 0%);
    transition-timing-function: ease-out;
    transition-delay: 0.5s;
}

body.openNewsModal .newsModal .win {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-timing-function: ease-out;
    transition-delay: 1s;
}

body.openNewsModal .newsModal .close {
    opacity: 1;
    transition-timing-function: ease-out;
    transition-delay: 1s;
}


/** 詳細ページ用 ----------------------------------------------- **/

body#newsDetailPage .newsModal {
    top:0;
}

body#newsDetailPage .newsModal .bg {
    opacity: 1;
    transform: translate(0%, 0%);
}

body#newsDetailPage .newsModal .win {
    opacity: 1;
    transform: translate(-50%, -50%);
}

body#newsDetailPage .newsModal .close {
    opacity: 1;
}




/** ---------------------------------------------------------------------------


    Responsive for tablet & Phone


------------------------------------------------------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {



}



/** ---------------------------------------------------------------------------


    Responsive for Smart Phone


------------------------------------------------------------------------------- */

@media all and (max-width: 767px) {

    
    
    /** モーダルウィンドウ ------------------------------------------------------------- **/

    /*
    .newsModal {
        display: block;
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        z-index:1500;
    }
    
    .newsModal .bg {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color:rgba(0,0,0,0.9);
        cursor: pointer;
    }
*/
    .newsModal .win {
        left: 0;
        top : 0;
        width: 100%;
        height: 100%;
        max-height:none;
        padding: 50px 30px 80px 30px;
        transform: translate(0%, 0%);
    }

    .newsModal .close {
        right: 10px;
        top:10px;
    }

    .newsModal .close a {
        width: 30px;
        height: 30px;
    }

    .newsModal .close a::before,
    .newsModal .close a::after {
        background-color:#222222;
    }

    
    /** ---------------------------------------------------------------------------


        詳細Article


    ------------------------------------------------------------------------------- **/


    /*
    .newsDetail {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
    }
*/
    
    .newsDetail .flx {
        display: block;
    }

    .newsDetail .flx > .left {
        width: auto;
    }

    .newsDetail .flx > .right {
        width: auto;
        margin: 20px 0 0 0;
        padding: 0;
        border-left:0;
    }
    
    
    /** アニメーション ----------------------------------------------- **/

    /* before */
    .newsModal .win {
        transform: translate(0%, -20%);
    }

    /* after */
    body.openNewsModal .newsModal .win {
        transform: translate(0%, 0%);
    }
    
    
    /** 詳細ページ用 ----------------------------------------------- **/

    body#newsDetailPage .newsModal .win {
        transform: translate(0%, 0%);
    }
}



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



	TOPページ   /



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



/** ---------------------------------------------------------------------------


	Article


------------------------------------------------------------------------------- **/

/*
#indexArticle {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

#indexArticle > header {
    display: none;
}
*/









/** ---------------------------------------------------------------------------


	共通パーツ : 情報一覧表示


------------------------------------------------------------------------------- **/


/* お知らせ一覧 */
.infoBoxes {
	display: block;
	position: relative;
	margin: 30px 0 0;
	padding: 0;
}


/* お知らせBOX */

.infoBox {
	display: block;
	position: relative;
	width: calc(20% - 10px);
	margin: 10px 5px 0;
	padding: 0;
	box-sizing: border-box;
	border-radius: 5px;
	background-color:#ffffff;	
}
.infoBox a:link,
.infoBox a:visited { color:#231815; }
.infoBox a:hover, 
.infoBox a:active { color:#555555; }

.infoBox dl {
	margin: 0;
	padding: 0;
}

.infoBox dt.image {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100%;
	box-sizing: border-box;
}

.infoBox dt.image img {
	display: block;
	position: absolute;
	left: 50%;
	top:50%;
	width: auto;
	max-width: 80%;
	height: auto;
	max-height: 80%;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}

.infoBox dd {
	margin: 0;
	padding: 10px;
}

.infoBox .date {
    margin: 0;
    padding: 0;
	font-size: 14px;
    font-weight: 400;
}

.infoBox h3 {
    margin: 0 0 1em;
    padding: 0;
    font-size:14px;
    font-weight: 700;
}


/** for Smart Phone --------------------------------------- **/

@media all and (max-width: 767px) {
	
	/* お知らせBOX */
	.infoBox {
		width: calc(50% - 10px);	
	}
}



/** ---------------------------------------------------------------------------


	共通パーツ : 縦書き文章


------------------------------------------------------------------------------- **/

.poem {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	
    width: auto;
    max-width: 100%;
    margin: 50px 0 0 0;
    padding: 0;
    box-sizing: border-box;
}

.poem > .inner {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0 0 30px;
    box-sizing: border-box;

    font-size:15px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;
}

.poem > .inner::-webkit-scrollbar {
    width:10px;
    background:#ffffff;
}
.poem > .inner::-webkit-scrollbar:horizontal {
    height:10px;
}
.poem > .inner::-webkit-scrollbar-button {
    width:10px;
    height:10px;
    background:#e0e0e0;
    border-radius: 5px;
}
.poem > .inner::-webkit-scrollbar-piece {
    background:#eee;
}
.poem > .inner::-webkit-scrollbar-piece:start {
    background:#eee;
}
.poem > .inner::-webkit-scrollbar-thumb {
    background:#e0e0e0;
    border-radius: 5px;
}
.poem > .inner::-webkit-scrollbar-corner {
    background:#e0e0e0;
    border-radius: 5px;
}

/** for Smart Phone ---------------------------------------- **/

@media all and (max-width: 767px) {
	
	.poem {
		width: auto;
		margin: 50px 30px 0;
	}

	.poem > .inner {
	    width: auto;
	    max-width: 100%;
	    margin: 0;
	    padding: 0 0 30px;
	    box-sizing: border-box;

	    font-size:15px;
	    -webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	    -o-writing-mode: vertical-rl;
	    writing-mode: vertical-rl;
    
	    overflow: auto;
	    overflow-x: auto;
	    overflow-y: hidden;
	}

	.poem > .inner::-webkit-scrollbar {
	    width:10px;
	    background:#ffffff;
	}
	.poem > .inner::-webkit-scrollbar:horizontal {
	    height:10px;
	}
	.poem > .inner::-webkit-scrollbar-button {
	    width:10px;
	    height:10px;
	    background:#e0e0e0;
	    border-radius: 5px;
	}
	.poem > .inner::-webkit-scrollbar-piece {
	    background:#eee;
	}
	.poem > .inner::-webkit-scrollbar-piece:start {
	    background:#eee;
	}
	.poem > .inner::-webkit-scrollbar-thumb {
	    background:#e0e0e0;
	    border-radius: 5px;
	}
	.poem > .inner::-webkit-scrollbar-corner {
	    background:#e0e0e0;
	    border-radius: 5px;
	}
}




/** ---------------------------------------------------------------------------


	ブロック共通


------------------------------------------------------------------------------- **/

.siteBlock.index {
	padding: 100px 50px;
}

.siteBlock.index header {
/*
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
*/	
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	  
	font-family:'Noto Serif JP', 'Yu Mincho Medium', serif;
    line-height: 1.3;
    letter-spacing: 0.2em;
}

.siteBlock.index header .icon {
	width: 100%;
    margin: 0 0 20px;
    padding: 0;
	text-align: center;
}

.siteBlock.index header .icon img {
	width: 40px;
	height: 40px;
	vertical-align: bottom;
}

.siteBlock.index header h1 {
    margin: 0;
    padding: 0;
/*
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
*/
	font-size:30px;
    font-weight: 700;
	white-space: nowrap;
	text-align: center;
}

.siteBlock.index header h2 {
	margin: 0;
    padding: 0 0 0 0.5em;
/*	
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
*/	
    font-size:16px;
    font-weight: 700;
	white-space: nowrap;
	text-align: center;
}


/* 情報一覧 ---------------------------------- */

.siteBlock.index .infoBoxes {
	margin: 30px 0 0 0;
}

.siteBlock.index .infoBoxes .hvSlider {
}

.siteBlock.index .infoBoxes .hvSlider .screen  > ul {
    align-items: stretch;
}

.siteBlock.index .infoBoxes .hvSlider .screen > ul > li {
	width: 0.19%;
	margin: 0 0.005%;
}

.siteBlock.index .infoBoxes .hvSlider .pointer {
	position: relative;
	left: auto;
	bottom: auto;
	width: auto;
	margin: 10px 0 0 0;
}

.siteBlock.index .infoBoxes .hvSlider .pointer.dot li[rel].sel a::before,
.siteBlock.index .infoBoxes .hvSlider .pointer.dot li[rel].visible a::before {
	background-color: #cc0000;
}



/* Moreボタン ------------------------------- */

.siteBlock.index .more {
    display: block;
    position: relative;
    margin: 30px 0 0 0;
    padding: 0;
    text-align: center;
}

.siteBlock.index .more a {
    display: inline-block;
	position: relative;
	width: auto;
	min-width: 300px;
	margin: 10px 20px 10px 20px;
	padding: 20px 30px;
	box-sizing: border-box;
	
	border: 2px solid #efc5a5;
    font-size:16px;
    font-weight: 700;
	text-decoration: none;
	text-align: center;
    color:#efc5a5;
	
	background-color: #ffffff;
}

.siteBlock.index .more a::before {
	content: "";
	display: block;
	position: absolute;
	right: -15px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border-top: 2px solid #efc5a5;
	border-right: 2px solid #efc5a5;
	transform: translateY(-50%) rotate(45deg);
}
.siteBlock.index .more a::after {
	content: "";
	display: block;
	position: absolute;
	right: -15px;
	top: 50%;
	width: 30px;
	height: 2px;
	margin: 0;
	padding: 0;
	background-color: #efc5a5;
	transform: translateY(-50%);
}

.siteBlock.index .more a:link,
.siteBlock.index .more a:visited { color:#efc5a5; }
.siteBlock.index .more a:hover { background-color:#da1b43; color: #ffffff; }



/** for tablet -------------------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {
    
	
	.siteBlock.index {
		padding: 100px 30px;
	}
	
	.siteBlock.index .infoBoxes .hvSlider .screen > ul > li {
		width: 0.24%;
	}
}


/** for Smart Phone --------------------------------------- **/

@media all and (max-width: 767px) {
	
	.siteBlock.index {
		padding: 100px 20px;
	}
	
	.siteBlock.index header h1 {
		font-size:24px;
	}

	.siteBlock.index header h2 {
		font-size:16px;
	}

	/* カルーセル(overwrite) */
	.siteBlock.index .infoBoxes .hvSlider {
		width: auto;
	}

	.siteBlock.index .infoBoxes .hvSlider .screen > ul > li {
		width: 0.48%;
		margin: 0 0.01%;
	}


	/* Moreボタン */
	.siteBlock.index .more {
		display: block;
		position: relative;
		margin: 30px 0 0 0;
		padding: 0;
		text-align: center;
	}

	.siteBlock.index .more a {
		display: block;
		min-width: 1px;
		margin: 10px 30px;
		padding: 15px 20px;
		font-size:14px;
	}
}



/** ---------------------------------------------------------------------------


	Home（メインビジュアル）


------------------------------------------------------------------------------- **/

.siteBlock.index.home {
	padding: 0;
}

.siteBlock.index.home .hvSlider.fade .screen {
    padding: 0 0 60%;
}

.siteBlock.index.home h1 {
	display: block;
	position: absolute;
	left: 76.5%;
	top: 6.64%;
	width: 21%;
	margin: 0;
	padding: 0;
	font-size: inherit;
	z-index: 100;
}

.siteBlock.index.home h1 img {
	width: 100%;
	vertical-align: bottom;
}


/* 読み込み終わるまで待つ */
.siteBlock.index.home h1 {
	opacity: 0;
}

.siteBlock.index.home.ready h1 {
	opacity: 1;
	transition: opacity 0.5s linear 0.5s;
}



/** for tablet ---------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {
}


/** for Smart Phone ----------------------------- **/

@media all and (max-width: 767px) {

	.siteBlock.index.home .image {
		overflow: hidden;
	}

	.siteBlock.index.home .hvSlider {
		width: 200%;
		margin: 0 0 0 -50%;
	}

	.siteBlock.index.home .name {
		left: 60%;
		right: 5%;
	}
	
	.siteBlock.index.home h1 {
		left: 66.5%;
		top: 6.64%;
		width: 31%;
	}
}



/** ---------------------------------------------------------------------------


	TOPページ各section


------------------------------------------------------------------------------- **/


/** お知らせ ------------------------------------------------ **/

.siteBlock.index.info {
	background-color: #feefef;
}



/** ステートメント -------------------------------------------- **/

.siteBlock.index.statement {
	background-color: #f9ede4;
}

.siteBlock.index.statement .poem {
    display: block;
    margin: 50px 0 0 0;
    padding: 0;
    box-sizing: border-box;
}

.siteBlock.index.statement .poem > .inner {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0 0 30px;
    box-sizing: border-box;
    font-size: 15px;

    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;

	overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
	
	text-align: center;
}



.siteBlock.index.statement .more a {
	border-color: #e08843;
	background-color: #ffffff;
}
.siteBlock.index.statement .more a::before {
	border-top-color: #e08843;
	border-righ-color: #e08843;
}
.siteBlock.index.statement .more a::after {
	background-color: #e08843;
}
.siteBlock.index.statement .more a:link,
.siteBlock.index.statement .more a:visited { color:#e08843; }
.siteBlock.index.statement .more a:hover,
.siteBlock.index.statement .more a:active {
	background-color:#e08843;
	color: #ffffff;
}



/** ひきたさんの本 ----------------------------------------------- **/

.siteBlock.index.book {
	background-color: #fdfae9;
	background-color: #fafade;
}

.siteBlock.index.book .more a {
	border-color: #d6cd0d;
	background-color: #ffffff;
}
.siteBlock.index.book .more a::before {
	border-top-color: #d6cd0d;
	border-righ-color: #d6cd0d;
}
.siteBlock.index.book .more a::after {
	background-color: #d6cd0d;
}
.siteBlock.index.book .more a:link,
.siteBlock.index.book .more a:visited { color:#d6cd0d; }
.siteBlock.index.book .more a:hover,
.siteBlock.index.book .more a:active {
	background-color:#d6cd0d;
	color: #ffffff;
}



/** 講演 ---------------------------------------------------- **/

.siteBlock.index.lecture {
	background-color: #f3f8e6;
}

/*
.siteBlock.index.lecture .sectionHeader::before {
    background-color: #efe3a8;
}
*/

.infoBoxes.lecture.regular {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.infoBox.lecture.regular {
	background-color: transparent;
}

.infoBox.lecture.regular dt.image {
	width: auto;
	margin: 0 20%;
	padding: 0;
}

.infoBox.lecture.regular dt.image img {
	position: relative;
	left: auto;
	top: auto;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	transform: translate(0px, 0px);
}

.infoBox.lecture.regular dd {
	text-align: center;
}


/** コラム・執筆 ------------------------------------------------ **/

.siteBlock.index.column {
	background-color: #f0fcf5;
}

.infoBox.column dt.image img {
	max-width: 100%;
	max-height: 100%;
}



/** ブログ ------------------------------------------------------ **/

.siteBlock.index.blog {
	background-color: #f2fcfb;
}

.siteBlock.index.blog .more a {
	border-color: #20bfb9;
	background-color: #ffffff;
}
.siteBlock.index.blog .more a::before {
	border-top-color: #20bfb9;
	border-righ-color: #20bfb9;
}
.siteBlock.index.blog .more a::after {
	background-color: #20bfb9;
}
.siteBlock.index.blog .more a:link,
.siteBlock.index.blog .more a:visited { color:#20bfb9; }
.siteBlock.index.blog .more a:hover,
.siteBlock.index.blog .more a:active {
	background-color:#20bfb9;
	color: #ffffff;
}




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



	第2階層 カテゴリーページCSS



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



/** ---------------------------------------------------------------------------


	共通


------------------------------------------------------------------------------- **/


/* カテゴリー共通ヘッダー */

.categoryHeader {
    display: block;
    position: relative;
    margin: 0;
    padding: 10% 0 8%;
    overflow: hidden;
    background: linear-gradient(to bottom, #ffffff 30%, #f5f5f5 100%);
}

.categoryHeader a:link,
.categoryHeader a:visited { color:#231815; }
.categoryHeader a:hover,
.categoryHeader a:active { color:#da1b43; }

.categoryHeader .hikita {
    display: block;
    position: absolute;
    width: 30%;
    right:0;
    bottom:0;
}

.categoryHeader img {
	vertical-align: bottom;
}

.categoryHeader .ttl {
	display: flex;
	margin: 0 50% 0 10%;
	padding: 0;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	  
	font-family:'Noto Serif JP', 'Yu Mincho Medium', serif;
    line-height: 1.3;
    letter-spacing: 0.2em;
}

.categoryHeader h1 {
    margin: 0;
    padding: 0;
	
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

	font-size:50px;
    font-weight: 400;
	white-space: nowrap;
}

.categoryHeader h2 {
	margin: 0;
    padding: 0 0 0 0.3em;
	
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	
    font-size:20px;
    font-weight: 400;
	white-space: nowrap;
}

/* content(overwrite) */

.categoryMain .siteContent {
	margin: 50px auto;
}



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



	プロフィール /profile/



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

.siteMain.profile {
	margin: 0;
	padding: 0 0 100px;
	background-color: #f8ece3;
}

.siteMain.profile > .bg {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 25%;
	overflow: hidden;
}

.siteMain.profile > .bg img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}


/* article */
.siteContent.profile {
	max-width: 1000px;
	margin-top: -150px;
	padding: 0;
	z-index: 100;
	
	opacity: 1;
	transform: translateY(0);
}

.siteContent.profile > header {
	display: block;
	position: relative;
	width: 300px;
	margin: 0 auto;
	padding: 0;
}

.siteContent.profile > header .image {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100%;
	box-sizing: border-box;
	overflow: hidden;
	border:10px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}

.siteContent.profile > header .image img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}

.siteContent.profile > header .name {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	margin: 40px 0 0 0;	
}

.siteContent.profile > header h1 {
	display: block;
	margin: 0;
	padding: 0;
	width: 10%;
	font-size: 16px;
}

.siteContent.profile > header h1 svg {
	display: block;
	width: 100%;
	height: auto;
	fill:#444444;
	vertical-align: bottom;
}

.siteContent.profile > header h2 {
	margin: 2px 10px 0 0;
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 16px;
	font-weight: 400;
		
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	white-space: nowrap;
}
	
.siteContent.profile > header h3 {
	margin: 2px 20px 0 0;
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	white-space: nowrap;
}

.siteContent.profile .profile {
	margin: 100px 0 0 0;
}


.siteContent.profile .history {
	margin: 100px 0 0 0;
}

.siteContent.profile .history dl {
    margin: 0;
    padding: 0;
}

.siteContent.profile .history dt {
    clear: left;
    float: left;
    width: 5em;
    margin: 0;
    padding: 0;
}

.siteContent.profile .history dd {
    margin: 0;
    padding: 0 0 0 5em;
}



/* loading animation ---------------------------------- */

.siteMain.profile > .bg {
	opacity: 0;
}

body.ready .siteMain.profile > .bg {
	opacity: 1;
	transition: all 2s;
}


.siteContent.profile > header .image {
	opacity: 0;
	transform: scale3d(0.1,0.1,0.1);
}

body.ready .siteContent.profile > header .image {
	opacity: 1;
	transform: scale3d(1,1,1);
	transition: all 600ms cubic-bezier(.47,1.64,.41,.8) 2.5s;
}



.siteContent.profile > header h1 svg {
	opacity: 0;
	transform: translateX(20px);
	transition-property: all;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
}

body.ready .siteContent.profile > header h1 svg {
	opacity: 1;
	transform: translateX(0px);
}
body.ready .siteContent.profile > header h1 svg:nth-of-type(1) { transition-delay: 3s; }
body.ready .siteContent.profile > header h1 svg:nth-of-type(2) { transition-delay: 3.1s; }
body.ready .siteContent.profile > header h1 svg:nth-of-type(3) { transition-delay: 3.2s; }
body.ready .siteContent.profile > header h1 svg:nth-of-type(4) { transition-delay: 3.3s; }
body.ready .siteContent.profile > header h1 svg:nth-of-type(5) { transition-delay: 3.4s; }
body.ready .siteContent.profile > header h1 svg:nth-of-type(6) { transition-delay: 3.5s; }
body.ready .siteContent.profile > header h1 svg:nth-of-type(7) { transition-delay: 3.6s; }


.siteContent.profile > header h2 {
	opacity: 0;
}
body.ready .siteContent.profile > header h2 {
	opacity: 1;
	transition: all 0.5s linear 4s;
}

.siteContent.profile > header h3 {
	opacity: 0;
}
body.ready .siteContent.profile > header h3 {
	opacity: 1;
	transition: all 0.5s linear 4.5s;
}

.siteContent.profile .profile,
.siteContent.profile .history {
	opacity: 0;
	transform: translateY(100px);
}

body.ready .siteContent.profile .profile {
	opacity: 1;
	transform: translateY(0px);
	transition: all 1s ease-out 5s;
}

body.ready .siteContent.profile .history {
	opacity: 1;
	transform: translateY(0px);
	transition: all 1s ease-out 6s;
}



/** for Tablet ------------------------------------------------ **/

@media all and (max-width:1024px) and (min-width:768px) {

	.siteMain.profile > .bg {
		padding: 0 0 45%;
	}

	.siteContent.profile > header {
		width: 240px;
		margin: -120px auto 0;
	}

	.siteContent.profile > header h1 {
		width: 15%;
	}
}


/* Responsive for Smart Phone ------------------------------------ */

@media all and (max-width:768px) {

	.siteMain.profile > .bg {
		width: 100%;
		padding: 0 0 60% 0;
	}
	
	.siteMain.profile > .bg img {
		width: auto;
		max-width: none;
		height: 100%;
	}
		
	.siteContent.profile {
		margin: -100px 30px 0;
	}

	.siteContent.profile > header {
		width: 70%;
		margin: 0 auto;
		padding: 30px 0 0 0;
	}

	.siteContent.profile > header .image {
		border-width:5px;
		box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
	}
}










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



	書籍一覧ページ  /books/



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





/** ---------------------------------------------------------------------------


    書籍個別


------------------------------------------------------------------------------- **/




/*
.bookSec:first-child {
    margin: 0 auto;
}
*/















/* header ------------------------------------------------- */

#booksArticle {
    
}

#booksArticle > header {
    display: block;
    position: relative;
    margin: 0;
    padding: 5% 0 3%;
    overflow: hidden;
    
    background:linear-gradient(to bottom, #ffffff 30%, #f5f5f5 100%);
}

#booksArticle > header img {
    vertical-align: bottom;
}


#booksArticle > header h1 {
    display: block;
    position: relative;
    width: 5%;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}
#booksArticle > header h1::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top:0;
    width: 3px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color:#efc5a5;
}

#booksArticle > header h1 img {
    width: 100%;
    vertical-align: bottom;
}

#booksArticle > header .hikita {
    display: block;
    position: absolute;
    width: 30%;
    right:0;
    bottom:0;
}

#booksArticle > header .bk {
    display: block;
    position: absolute;
    width: 50%;
    left:-10%;
    bottom:-30%;
    transform: rotate(-20deg);
}






/** Responsive for tablet ------------------------------------------------------ **/

@media all and (max-width: 1024px) and (min-width:768px) {



    /** 書籍個別 ------------------------------------------------ **/

    .bookSec {
        width: calc(100% - 60px);
    }
}



/** Responsive for Smart Phone ------------------------------------------------- **/

@media all and (max-width: 767px) {


    /** 書籍個別 ------------------------------------------------ **/

    .bookSec {
        width: auto;
        margin: 50px 20px 0;
        padding: 20px;
    }
    .bookSec:first-child {
        width: auto;
        margin: 0 20px;
    }

    .bookSec .flx {
        display: block;
    }

    .bookSec .image {
        width: auto;
    }

    .bookSec .image img {
        max-width: 60%;
    }

    .bookSec .text {
        width: auto;
        margin: 30px 0 0 0;
        padding: 0;
        box-sizing: border-box;
    }


    .bookSec .links {
        margin: 0;
    }

    .bookSec .links ul {
        display: block;
    }

    .bookSec .links li {
        width: auto;
        margin: 20px 0 0 0;
    }
    
    .bookSec .links img {
        max-width: 60%;
    }

    .bookSec .links li a::before {
        width: 100%;
        opacity: 1;
    }
    
    
    /* header ------------------------------------------------- */

    #booksArticle {

    }

    #booksArticle > header {
        display: block;
        position: relative;
        margin: 0;
        padding: 5% 0 3%;
        overflow: hidden;

        background:linear-gradient(to bottom, #ffffff 30%, #f5f5f5 100%);
    }

    #booksArticle > header img {
        vertical-align: bottom;
    }


    #booksArticle > header h1 {
        display: block;
        position: relative;
        width: 10%;
        margin: 0 auto;
        padding: 0 10px;
        text-align: center;
    }
    #booksArticle > header h1::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top:0;
        width: 3px;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color:#efc5a5;
    }

    #booksArticle > header h1 img {
        width: 100%;
        vertical-align: bottom;
    }

    #booksArticle > header .hikita {
        display: block;
        position: absolute;
        width: 30%;
        right:0;
        bottom:0;
    }

    #booksArticle > header .bk {
        display: block;
        position: absolute;
        width: 50%;
        left:-10%;
        bottom:-30%;
        transform: rotate(-20deg);
    }
}



/** ---------------------------------------------------------------------------


	ひきたよしあきの書籍ページ     /books/


------------------------------------------------------------------------------- **/

.categoryMain.books {
	background-color:#fafade;
}


/* ページヘッダー部分 */
.categoryHeader.books {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
	background : transparent;
}

.categoryHeader.books .bg {
    display: block;
    position: relative;
	width: 100%;
    margin: 0;
    padding: 0 0 50%;
    overflow: hidden;
	background : linear-gradient(to right, #f6f6f6, #fdfdfd);
}

.categoryHeader.books .bg img {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	z-index:1;
}

.categoryHeader.books .ttl {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	position: absolute;
	left: 23%;
	top: 50%;
	right: 5%;
	margin: 0;
	padding: 0;
	z-index: 2;
	transform: translateY(-50%);
}

.categoryHeader.books h1 {
	display: block;
	position: relative;
	width: 50px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 16px;
}

.categoryHeader.books h1 span {
	display: inline-block;
	position: relative;
	padding: 2%;
	box-sizing: border-box;
}

.categoryHeader.books h1 img {
	display: block;
	position: relative;
	width: 30px;
	max-width: 80%;
	height: auto;
	fill: #ffffff;
	z-index: 4;
}

.categoryHeader.books .state {
	width: auto;
	max-width: calc( 100% - 50px );
	margin: 10px 0 0 0;
	padding: 0;
	box-sizing: border-box;
	
	overflow: auto;
	overflow-x: auto;
	overflow-y: hidden;
	
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	white-space: nowrap;
	
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 16px;
}
/*
.categoryHeader.books .state > *:first-child { margin-right: 0; }
.categoryHeader.books .state > *:last-child  { margin-left:  0; }
*/



/* ヘッダー部分のアニメーション */
.categoryHeader.books .bg                        { opacity: 0; }
body.ready .categoryHeader.books .bg             { opacity: 1; transition: all 2s linear; }

/*
.categoryHeader.books h1 span::before            { opacity: 0; height:  1px; }
body.ready .categoryHeader.books h1 span::before { opacity: 1; height: 100%; transition: all 0.5s ease-out 2s; }
*/

.categoryHeader.books h1 img                     { opacity: 0; transform: translateY(20px); }
body.ready .categoryHeader.books h1 img          { opacity: 1; transform: translateY(0px);  transition: all 1s linear 2s; }

.categoryHeader.books .state                     { opacity: 0; transform: translateY(20px); }
body.ready .categoryHeader.books .state          { opacity: 1; transform: translateY(0px);  transition: all 1s linear 2.5s; }



/** 書籍一覧 ---------------------------------------------------------------------- **/

.categoryMain.books .siteContent {
	max-width: 1200px;
}



/** 各書籍 ------------------------------------------------------------------------- **/

.siteBlock.category.book {
    margin: 50px auto 0;
    padding: 50px 30px;
    box-sizing: border-box;
    
    background-color: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
}

.siteBlock.category.book .flx {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.siteBlock.category.book .image {
    width: 40%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.siteBlock.category.book .image img {
    display: block;
    vertical-align: bottom;
    width: auto;
    max-width: 70%;
    margin: 0 auto;
	box-shadow: 1px 2px 8px 0px rgba(0,0,0,0.3);	
}

.siteBlock.category.book .text {
    width: 60%;
    margin: 0;
    padding: 0 0 0 30px;
    box-sizing: border-box;
}


/* アイコン */
.siteBlock.category.book .icons {
	display: block;
	position: relative;
	margin: 0 0 10px 0;
	padding: 0;
}

.siteBlock.category.book .icons ul {
	margin: 0;
	padding: 0;
}

.siteBlock.category.book .icons li {
	display: inline-block;
	margin: 0 0.5em 0 0;
	padding: 5px 10px;
	list-style-type: none;
	
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
}
.siteBlock.category.book .icons li.new {
	background-color: #cc0000;
}
.siteBlock.category.book .icons li.soon {
	background-color: #FFC600;
}


/* 書籍名 */
.siteBlock.category.book header h1 {
    margin: 0;
    padding: 0;
    font-size: 20px;
}

/* 詳細 */
.siteBlock.category.book .spec .detail {
	margin: 30px 0 0 0;
}

/* スペック */
.siteBlock.category.book .spec {
    display: block;
    position: relative;
    margin: 2em 0 0 0;
    font-size: smaller;
}

.siteBlock.category.book .spec dl {
    margin: 0;
    padding: 0;
}
.siteBlock.category.book .spec dl::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.siteBlock.category.book .spec dt {
    clear: left;
    float: left;
    width: 4em;
    margin: 0;
    padding: 0;
}

.siteBlock.category.book .spec dd {
    margin: 0;
    padding: 0 0 0 4em;
}

.siteBlock.category.book .links {
    margin: 20px 0 0 0;
}

.siteBlock.category.book .links ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
}

.siteBlock.category.book .links li {
    width: 40%;
    margin: 0 5% 0 0;
    padding: 0;
    list-style-type: none;
}

.siteBlock.category.book .links li a {
    display: block;
    position: relative;
    margin: 0;
    padding: 5px 0;
    border-bottom:1px solid #e0e0e0;
    text-align: center;
}
.siteBlock.category.book .links li a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    height: 1px;
    
    width: 1px;
    opacity: 0;
    transition: all 0.3s ease-out;
}
.siteBlock.category.book .links li.amazon a::before  { background-color: #ff9900; }
.siteBlock.category.book .links li.rakuten a::before { background-color: #bf0000; }

.siteBlock.category.book .links li a:hover::before {
    width: 100%;
    opacity: 1;
}

.siteBlock.category.book .links img {
    width: auto;
    max-width: 80%;
    vertical-align: bottom;
}


/* animation */
.siteBlock.category.book             { opacity: 0; transform: translateY(50px); }
.siteBlock.category.book.enter       { opacity: 1; transform: translateY(0px);  transition: all 0.5s ease-out; }

.siteBlock.category.book .text       { opacity: 0; transform: translateY(30px); }
.siteBlock.category.book.enter .text { opacity: 1; transform: translateY(0px);  transition: all 0.5s ease-out 0.3s; }





/** Responsive for tablet & Phone --------------------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {

	.categoryMain.books .categoryHeader .bg {
		padding: 0 0 60%;
	}

	.categoryMain.books .categoryHeader .bg img {
		width: 100%;
		height: auto;
	}

	.categoryMain.books .state {
		font-size: 14px;
	}	
}



/** Responsive for Smart Phone ------------------------------------------- **/

@media all and (max-width: 767px) {

	
	/* ページ見出し */
	.categoryHeader.books .bg {
		padding: 0 0 100%;
	}

	.categoryHeader.books .bg img {
		width: auto;
		max-width: none;
		height: 100%;
	}

	.categoryHeader.books .ttl {
		display: block;
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		margin: 20px 20px 0;
		padding: 0;
		z-index: 2;
		transform: translateY(0%);
	}

	.categoryHeader.books h1 {
		position: absolute;
		left: auto;
		right: 10%;
		bottom: 130%;
		width: 15%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.categoryHeader.books h1 img {
		width: auto;
	}
	
	.categoryHeader.books .state {
		max-width: 100%;
		height: 350px;
		margin: 0;
		padding: 20px 10px 10px 10px;
		box-sizing: border-box;
		font-size: 14px;
		background-color:#ffffff;
	}
	
	
	/** 書籍一覧 ----------------------------------------- **/

	.categoryMain.books .siteContent {
		max-width: none;
		margin: 0 20px 50px;
	}

	
	/** 書籍個別  ---------------------------------------- **/

	.siteBlock.category.book {
		margin: 20px 0 0 0;
		padding: 30px;
	}

	.siteBlock.category.book .flx {
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
	}

	.siteBlock.category.book .image {
		width: auto;
	}

	.siteBlock.category.book .image img {
		width: 80%;
		margin: 0 auto;	
	}

	.siteBlock.category.book .text {
		width: auto;
		margin: 30px 0 0 0;
		padding: 0;
	}


	/* title */
	.siteBlock.category.book header h1 {
		margin: 20px 0 0 0;
		font-size: 18px;
	}

	/* link */
	.siteBlock.category.book .links {
		margin: 30px 0 0 0;
	}

	.siteBlock.category.book .links li {
		width:48%;
		margin: 0 1%;
	}
}





/** ---------------------------------------------------------------------------


	ひきたよしあきのブログ


------------------------------------------------------------------------------- **/



/* ブログカテゴリー共通 ------------------------------------- */

.siteMain.blog {
	margin: 60px 0 0 0;
	background-color:#e6f5f4;
	background-color:#f3fdfd;
}

.siteMain.blog .categoryHeader {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	background-color:transparent;
}

.siteMain.blog .categoryHeader .bg {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 40% 0;
	overflow: hidden;
	z-index: 2;
}

.siteMain.blog .categoryHeader .bg img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}


.siteMain.blog .categoryHeader h1 {
	display: block;
	position: absolute;
	left: 75%;
	top: 50%;
	width: 3%;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	z-index: 3;
}

.siteMain.blog .categoryHeader h1 span {
	display: inline-block;
	position: relative;
	padding: 2%;
	box-sizing: border-box;
}

.siteMain.blog .categoryHeader h1 span::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color:#24cac3;
	z-index: 3;
}

.siteMain.blog .categoryHeader h1 img {
	display: block;
	position: relative;
	width: 30px;
	max-width: 80%;
	height: auto;
	fill: #ffffff;
	z-index: 4;
}


/* animation */
.siteMain.blog .categoryHeader .bg {
	opacity: 0;
}
body.ready .siteMain.blog .categoryHeader .bg {
	opacity: 1;
	transition: all 2s linear;
}

.siteMain.blog .categoryHeader h1 span::before {
	opacity: 0;
	height: 1px;
}
body.ready .siteMain.blog .categoryHeader h1 span::before {
	opacity: 1;
	height: 100%;
	transition: all 0.5s ease-out 2s;
}

.siteMain.blog .categoryHeader h1 img {
	opacity: 0;
	transform: translateY(20px);
}
body.ready .siteMain.blog .categoryHeader h1 img {
	opacity: 1;
	transform: translateY(0px);
	transition: all 1s ease-out 2s;
}



/* ブログ記事（一覧） */

.blogSummary {
	display: block;
	position: relative;
	margin: 0;
	padding: 50px 0;
}
.blogSummary:nth-child(even) {
	background-color:#e6f5f4;
}

.blogSummary a {
	color: #231815;
	text-decoration: none;
	transition: all 0.3s;
}
.blogSummary a:link,
.blogSummary a:visited { color:#231815; }
.blogSummary a:hover,
.blogSummary a:active { color:#da1b43; }

.blogSummary dl {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;	
}

.blogSummary dt {
	display: block;
	position: relative;
	width: 30%;
	margin: 0;
	padding: 0 0 30%;
	overflow: hidden;
	box-sizing: border-box;
}

.blogSummary dt img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}

.blogSummary dd {
	display: block;
	position: relative;
	width: 70%;
	margin: 0;
	padding: 0 0 0 30px;
	box-sizing: border-box;
}



/** 一覧ページ ------------------------------------------------- **/

.categoryMain.blog .siteContent {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}


/* 詳細ページ */
.singleMain.blog .siteContent {
	margin: 50px auto 0;
	max-width: 1000px;
}

/* エントリー詳細 */
.post.blog {
	display: block;
	position: relative;
	padding: 0 0 50px;
}

.post.blog .entry-header {
	display: block;
	position: relative;
	margin: 0;
	padding: 30px;
	background-color:#ffffff;
	border-left: 3px solid #a9dbd9;
	border-bottom: 1px solid #a9dbd9;
}

.post.blog .entry-content {
	display: block;
	position: relative;
	margin: 30px 0 0 0;
	padding: 30px;
	background-color:#ffffff;
	border-left: 3px solid #a9dbd9;
	border-bottom: 1px solid #a9dbd9;
}



/* フォーマット上書き */

.post.blog .wpEdit h3 { 
    background-color:#ecf6f6;
    border-left-color:#22afa9;
}

.post.blog .wpEdit h4 {
    border-left-color:#22afa9;
}

.post.blog .wpEdit h5::before {
    background-color:#22afa9;
}


/** Responsive for tablet & Phone --------------------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {


	.siteMain.blog .categoryHeader .bg {
		padding: 0 0 60% 0;
	}

	.siteMain.blog .categoryHeader .bg img {
		width: auto;
		height: 100%;
	}
}




/** Responsive for Smart Phone ------------------------------------------- **/

@media all and (max-width: 767px) {

	
	/* ブログカテゴリー共通 ------------------------------------- */

	.siteMain.blog .categoryHeader .bg {
		padding: 0 0 100% 0;
	}

	.siteMain.blog .categoryHeader .bg img {
		width: auto;
		height: 100%;
	}


	.siteMain.blog .categoryHeader h1 {
		left: 85%;
		width: 3%;
	}

	.siteMain.blog .categoryHeader h1 img {
		width: 20px;
	}


	/* ブログ記事（一覧） ------------------------------------ */

	.blogSummary {
		padding: 30px;
	}

	.blogSummary dl {
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
	}

	.blogSummary dt {
		width: auto;
		overflow: visible;
		padding: 0;
	}

	.blogSummary dt img {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		max-width: 100%;
		max-height: none;
		margin: 0 auto;
		transform: translate(0%, 0%);
	}

	.blogSummary dd {
		display: block;
		position: relative;
		width: auto;
		margin: 30px 0 0 0;
		padding: 0;
	}	
}



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



	ひきたよしあき公式サイト お問い合わせページ  /contact/



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



/** ページ見出し ------------------------------------------ **/

.categoryMain.contact {
	background-color:#f2f7fc;
}

.categoryHeader.contact {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.categoryHeader.contact .bg {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 40% 0;
	overflow: hidden;
}

.categoryHeader.contact .bg img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}

.categoryHeader.contact .ttl {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	position: absolute;
	left: 5%;
	right: 45%;
	top: 50%;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
}

.categoryHeader.contact h1,
.categoryHeader.contact h2 {
	display: block;
	margin: 0 0.5%;
}

.categoryHeader.contact h1 img,
.categoryHeader.contact h2 img {
	display: block;
	position: relative;
	width: 30px;
	max-width: 80%;
	height: auto;
	z-index: 4;
}

.categoryHeader.contact h1 span,
.categoryHeader.contact h2 span {
	display: inline-block;
	position: relative;
	padding: 2%;
	box-sizing: border-box;
}
/*
.categoryHeader.contact h1 span::before,
.categoryHeader.contact h2 span::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color:#75b3ea;
	z-index: 3;
}
*/


/* 見出しのanimation */

.categoryHeader.contact .bg            { opacity: 0; }
body.ready .categoryHeader.contact .bg { opacity: 1; transition: all 2s linear; }

/*
.categoryMain.contact h1 span::before            { opacity: 0; height:  1px; transform: translateY(-10px); }
body.ready .categoryMain.contact h1 span::before { opacity: 1; height: 100%; transform: translateY(0px);  transition: all 0.5s ease-out 2s; }

.categoryMain.contact h2 span::before            { opacity: 0; height:  1px; transform: translateY(-10px); }
body.ready .categoryMain.contact h2 span::before { opacity: 1; height: 100%; transform: translateY(0px);  transition: all 0.5s ease-out 2.5s; }
*/

.categoryMain.contact h1 img            { opacity: 0; transform: translateY(10px); }
body.ready .categoryMain.contact h1 img { opacity: 1; transform: translateY(0px);  transition: all 1s linear 2s; }

.categoryMain.contact h2 img            { opacity: 0; transform: translateY(10px); }
body.ready .categoryMain.contact h2 img { opacity: 1; transform: translateY(0px);  transition: all 1s linear 2s; }


/* 本文 */
.siteContent.contact {
    max-width: 1000px;
    padding: 100px 0;
}

.siteContent.contact header h1 {
    display: block;
    position: relative;
    width: 15%;
    margin: 0 auto;
    padding: 0 10px;
}
.siteContent.contact header h1::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top:0;
    width: 3px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #BBD4EF;
}

.siteContent.contact header h1 img {
    width: 100%;
    vertical-align: bottom;
}

.siteContent.contact .detail {
    margin: 40px 0 0 0;
    text-align: center;
}

.siteContent.contact .detail ul {
    margin: 30px 0 0 0;
    padding: 0;
}

.siteContent.contact .detail li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
.siteContent.contact .detail dl {
    margin: 0;
    padding: 0;
}

.siteContent.contact .detail dt {
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    margin: 0;
    padding: 0;
}
.siteContent.contact .detail dt img {
    vertical-align: bottom;
}

.siteContent.contact .detail dd {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 5px;
    padding: 0;
}

.siteContent.contact .contactForm {
	margin-top: 50px;
}

.siteContent.contact .contactForm textarea {
    height: 20em;
}



/** Responsive for tablet --------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {

	/* 見出し */
	.categoryMain.contact .bg {
		padding: 0 0 60% 0;
	}

	.categoryMain.contact .bg img {
		width: auto;
		max-width: none;
		height: 100%;
	}
	
	/* 本文 */
    .siteContent.contact .detail p {
        text-align:left;
    }
    .siteContent.contact .detail p br {
        display:none;
    }
}

/** Responsive for Smart Phone ---------------------------- **/

@media all and (max-width: 767px) {
	
	/* 見出し */
	.categoryMain.contact .bg {
		padding: 0 0 100% 0;
	}

	.categoryMain.contact .bg img {
		left: auto;
		right: -20%;
		top: 50%;
		width: auto;
		max-width: none;
		height: 100%;
		transform: translateY(-50%);
	}

	.categoryMain.contact .ttl {
		left: 30px;
		right: 55%;
		top: 50%;
	}

	.categoryMain.contact h1 img,
	.categoryMain.contact h2 img {
		width: 20px;
	}
	
	/* 本文 */
	.siteContent.contact {
		max-width: none;
		margin: 0 20px;
		padding: 50px 0;
	}
	
	.siteContent.contact .detail p {
		text-align: justify;
	}
	
	.siteContent.contact .detail p br {
		display: none;
	}
}













/** ---------------------------------------------------------------------------


    Responsive for tablet & Phone


------------------------------------------------------------------------------- **/

@media all and (max-width: 1024px) and (min-width:768px) {

	/** ひきたよしあきのブログ ----------------------------------- **/
/*
	#blogIndex .infoBox {
		width: calc(25% - 10px);
	}
*/
}



/** Responsive for Smart Phone  ------------------------------------------------ **/


@media all and (max-width: 767px) {

	/** カテゴリー共通ヘッダー --------------------- **/
/*
	.categoryHeader {
		padding: 90px 0 30%;
	}

	.categoryHeader .hikita {
		display: block;
		position: absolute;
		width: 30%;
		right:0;
		bottom:0;
	}

	.categoryHeader .ttl {
		margin: 0;
	}

	.categoryHeader h1 {
		font-size:30px;
	}

	.categoryHeader h2 {
		font-size:16px;
	}
*/



	/** ひきたよしあきのブログ ----------------------------------- **/
/*

	#blogIndex .infoBox {
		width: calc(50% - 10px);
		border: 1px solid #a9dbd9;
	}

	#blogIndex .infoBox dt img {
		max-width: 95%;
		max-height: 95%;
	}

	#blogDetail .siteContent {
		width: calc( 100% - 40px );
	}

	.post.blog::before {
		width: 40%;
	}

	.post.blog .entry-header::before {
		width: 40%;
	}
*/
}