@charset "UTF-8";
#header { height: 80vh;}#header-wrap { height: 100%;
/* background: linear-gradient(to bottom, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);*/ position: relative;}#header-wrap::after {content: '';	background-image: url("../img/wave.png");	position: absolute;	bottom:0;	left: 0;	width: 100%;	height: 35px;	z-index: 9999;}
#top-header-wrap { position: absolute; bottom: 0; left: 1rem; z-index: 9999;}#top-header-wrap02 { position: absolute; bottom: 0; right: 1rem; z-index: 9999;}
#top-illust01 {position: relative;	top:0;	left: 0;}#top-illust02 {position: relative;	top:0;	left: 0;}
#top-h1 { font-size: 350%; border-bottom: solid .35vw #dbeef5;}
#greeting {padding: 5rem 0;}
#greeting h1 {font-size: 160%;	background: linear-gradient(transparent 60%, #DBEEF5 60%);}
#top_painting_banner{ background-image: url("../img/painting_banner.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden;}#top_sink-area_banner{ background-image: url("../img/sink-area_banner.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden;}#top_painting_banner a,
#top_sink-area_banner a { display: block; text-decoration: none; transition: all .4s;}
.top_painting_banner_contents,
.top_sink-area_banner_contents { position: relative; height: 20rem; z-index: 1;}.top_painting_banner_contents::before,
.top_sink-area_banner_contents::before {content: "";	position: absolute;	top: 0;	left: -100%;	width: 100%;	height: 100%;	background: rgba(255,255,255,.3);	transition: left 0.4s ease;	z-index: 0;}
#top_painting_banner:hover .top_painting_banner_contents::before,
#top_sink-area_banner:hover .top_sink-area_banner_contents::before {left: 0;}.top_painting_banner_contents h1 { font-size: 6vw;	color: #fff;	font-family: "Caveat", cursive;	opacity: .4;	position: absolute;	bottom: 5rem;	right: 3rem;	transform: rotate(-10deg);}
.top_sink-area_banner_contents h1 { font-size: 6vw;	color: #5aa1e3;	font-family: "Caveat", cursive;	opacity: .4;	position: absolute;	bottom: 5rem;	right: 3rem;	transform: rotate(-10deg);}.top_painting_banner_contents h2 { font-size: 120%;	color: #fff;	position: absolute;	bottom: 1.5rem;	right: 3rem;}
.top_sink-area_banner_contents h2 { font-size: 120%;	color: #5aa1e3;	position: absolute;	bottom: 1.5rem;	right: 3rem;}
#contents-text {padding: 10rem 0;}#bg-contents-text { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; height: 100%; width: 100%; opacity: .3;}
#contents-text::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to bottom, rgba(255,255,255,,8) 0%, rgba(255,255,255,.7) 20%, rgba(255,255,255,0) 70%, rgba(255,255,255,.8) 100%);	z-index: 10;}
#text-box { height: 100%; transition: .6s ease-out; transform: translateY(40px); opacity: 0; position: relative; z-index: 15;}#text-box.delighter.started { transform: translateY(0); opacity: 1;}#text-g-inner h2 { font-size: 160%;	font-weight:700; background: linear-gradient(transparent 60%, #DBEEF5 60%);}
#illust01 {position: absolute;	top: -5rem;	left: 1rem;	z-index: 20;}
#illust05 {position: absolute;	bottom:0;	right: 3rem;}
#news {background-image: url("../img/bg_blog.jpg");	background-position: center center;	background-repeat: no-repeat;	background-size: cover;	padding: 5rem 0;	margin-bottom: 5rem;}
#news h2 {color: #5aa1e3;	font-size: 160%;	font-weight: 600;}
#news > div {background:rgba(255,255,255,.7);	border-radius: 10px;	padding: 3rem;}
.to-list { position: absolute; right: 1vw; top: 1vw; font-size: 80%;}.list-box { min-height: 12vw; overflow: auto;}.list-box li { border-bottom: dotted 1px ; margin-top: .8vw; padding-bottom: .8vw;}a.list-link { text-decoration: underline; color: #5aa1e3;}a.list-link:hover { text-decoration: none;}.date-box { background-color: #5aa1e3; padding-top: .3vw; color: #ffffff;}
#y-art h1 {font-size: 140%;	text-align: center; font-weight: 600;}
#white-bord {background-image: url("../img/whtebord.png");	background-position: center center;	background-repeat: no-repeat;	height: 445px;}
.text-cont h2 {color: #fff;	padding: 1.5rem;	line-height: 1.4;	text-shadow: 1px 1px #333, 2px 2px #333, 3px 3px #404040, 4px 4px #404040, 5px 5px #404040, 6px 6px #787878, 7px 7px 4px #787878;	padding-top: 10rem;}
#illust02 {position: absolute;	top: 0;	left: 0;}
.cont-photo { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 50vw;}
#top-contentstop-contents h2 { color: #5aa1e3;}
#top-contents h3 { color: #5aa1e3;	font-size: 140%;	font-weight: 600;}
#top-contents dl {font-size: 110%;	padding: 0 3rem;}#top-contents dt {border-bottom: 1px solid #5aa1e3;	margin-bottom: 1rem;}
.frame img {display: inline-block; position: relative;}
.frame:after {position: absolute;	display: block;	content: "";	top: 0;	left: 0;	width: 100%;	height: 100%;	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);	transform: rotate(3deg);	background: #fff;	z-index: -1;}
.text-cont dt {color: #5aa1e3;	font-size: 130%;}
#banner {background-color: #FCFAF6;	padding-top: 5rem ;	margin-bottom: 5rem;}
#illust04 {position: absolute;	top: 5rem;	left: 2rem;	z-index: 20;}
#banner img {border-radius: 15px 15px 0 0;}
#banner h1 { font-size: 200%; font-weight:700; background: linear-gradient(transparent 60%, #DBEEF5 60%);}
#banner a { transition: 0.4s ease-out;}
#banner a:hover {text-decoration: none;	opacity: .7;}
.h2-banner { background:rgba(219,238,245,.4); font-size: 140%; font-weight: bold; padding:1rem; text-align: center; text-shadow: 1px 1px #333, 2px 2px #333, 3px 3px #404040, 4px 4px #404040, 5px 5px #404040, 6px 6px #787878, 7px 7px 4px #787878; transition: 0.1s ease-out; border-radius: 0 0 15px 15px;}
#banner a:hover .h2-banner {text-shadow:none;}
#illust06 {position: relative;	bottom:0;	right: 0;}
#eria { position: relative; margin: 5rem auto; padding: 2rem 0;}#eria:before { content: ""; display: block; width: 70%; height: 100%; background: linear-gradient(135deg, #DBEEF5, #f0f9fc); position: absolute; z-index: 1; left: 0; top: 0; border-radius: 0 30px 30px 0;}#eria #inner {position: relative; z-index: 2;}#eria #inner img {border-radius: 10px;}
#eria h2 {color: #5aa1e3;	font-size: 140%;	font-weight: bold;	border-bottom: 1px solid #5aa1e3;}
#top-voice-bg {background-image: url("../img/bg_voice.jpg");	background-size: cover;	background-position: center center;	background-repeat: no-repeat;	position: relative;}#top-voice-bg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.7);	z-index: 5;}#top-voice-bg > div {position: relative;	z-index: 10;}#top-voice header {background-image: url("../img/bg-voice-tit.jpg");	background-size: cover;	background-position: center center;	background-repeat: no-repeat;	position: relative;	padding: 5rem 0;}#top-voice header:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5);	z-index: 5;}#top-voice h1,
#top-voice p {position: relative;	z-index: 10;}
#top-voice i {color: #ffd000;}
#top-voice .under-bar {border-bottom: 2px solid #5aa1e3;}
#top-voice li i {font-size: 250%;	color: #5aa1e3;}
#top-voice figure {position: relative; margin: 0 0 0;}#top-voice .before-after {position: absolute; top: 0;	left: 0;}#top-voice .before-after p {font-size: 180%;	color: #fff;	font-weight: bold;	transform: rotate(-7deg);	text-shadow: 1px 1px 10px #333;}#top-voice figcaption {font-size: 80%;}
#top-voice figure {display: inline-block;	position: relative;	overflow: hidden;	padding: 10px; /* 6px だけは写真からはみ出す */	transform: rotate(-3deg);}#top-voice figure img {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);}#top-voice figure:before,#top-voice figure:after {content: "";	position: absolute;	z-index: 1;	width: 97px;	height: 50px;	background: #DCF7FF;	transform: rotate(-30deg);}/* 左上 */
#top-voice figure:before {box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);	top: -24px;	bottom: auto;	right: auto;	left: -26px;}/* 右下 */
#top-voice figure:after {box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);	top: auto;	bottom: -22px;	right: -25px;	left: auto;}
#manga {width: 50%;	margin: auto;}#illust07 {position: relative;	bottom:0;	right: 0;}
.gallery{ margin:0 0 5px 0;}
.gallery li:nth-of-type(1) { animation-delay: 0s;}.gallery li:nth-of-type(2) { animation-delay: 10s;}.gallery li:nth-of-type(3) { animation-delay: 20s;}.gallery li:nth-of-type(4) { animation-delay: 30s;}.gallery li:nth-of-type(5) { animation-delay: 40s;}.gallery li:nth-of-type(6) { animation-delay: 50s;}.gallery li:nth-of-type(7) { animation-delay: 60s;}.gallery li:nth-of-type(8) { animation-delay: 70s;}.slick-slider
{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list
{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}.slick-list:focus
{ outline: none;}.slick-list.dragging
{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,.slick-slider .slick-list
{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track
{ position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}.slick-track:before,.slick-track:after
{ display: table; content: '';}.slick-track:after
{ clear: both;}.slick-loading .slick-track
{ visibility: hidden;}
.slick-slide
{ display: none; float: left; height: 100%; min-height: 1px;}[dir='rtl'] .slick-slide
{ float: right;}.slick-slide img
{ display: block;}.slick-slide.slick-loading img
{ display: none;}.slick-slide.dragging img
{ pointer-events: none;}.slick-initialized .slick-slide
{ display: block;}.slick-loading .slick-slide
{ visibility: hidden;}.slick-vertical .slick-slide
{ display: block; height: auto; border: 1px solid transparent;}.slick-arrow.slick-hidden { display: none;}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next { position: absolute;/*絶対配置にする*/ z-index: 3; top: 42%; cursor: pointer;/*マウスカーソルを指マークに*/ outline: none;/*クリックをしたら出てくる枠線を消す*/ border-top: 2px solid #5aa1e3;/*矢印の色*/ border-right: 2px solid #5aa1e3;/*矢印の色*/ height: 25px; width: 25px;}
.slick-prev {/*戻る矢印の位置と形状*/ left:-2.5%; transform: rotate(-135deg);}
.slick-next {/*次へ矢印の位置と形状*/ right:-2.5%; transform: rotate(45deg);}
/*選択するサムネイル画像の設定*/
.choice-btn li{ cursor: pointer; outline: none; background:#333; width:calc(100% / 8)!important;}
.choice-btn li img{ opacity: 0.4;/*選択されていないものは透過40%*/}
.choice-btn li.slick-current img{ opacity: 1;/*選択されているものは透過しない*/}
.choice-btn .slick-track { transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/}
@media (min-width: 1200px){ #top-header-wrap, #greeting p, .list-box { font-size: 1.1rem; } .cont-photo { height: 555px; } #top-contents { font-size: 1rem; }}
@media (max-width: 991px){#top-header-wrap { width: 70%;	left: 0;}#top-header-wrap02 { width: 100%;} .bnr-link::after { opacity: .6; }}
@media (max-width: 767px){ #header { height: 120vw; } #top-h1 { font-size: 250%; border-bottom-width: .8vw; } #top-bottom-text { font-size: 130%; } #greeting { line-height: 5.3vw; height: auto; } #g-header-wrap { width: 100%; } #text-greeting { transform: translateY(0); opacity: 1; } a.bnr-link { height: 55vw; } .bnr-link::after { opacity: .3; } .h2-banner { font-size: 140%; } .bnr-line { display: none; } .index-header::after { top: 2vw; } .to-list { top: 5.5vw; } .list-box { min-height: 30vw; } .list-box li { margin-top: 4vw; padding-bottom: 4vw; }}@media (max-width: 575px){#top-header-wrap { width: 40%;	left: 0;}#top-header-wrap02 { width: 60%;}#greeting {margin-bottom: 5rem;}.top_painting_banner_contents h1,
.top_sink-area_banner_contents h1 { font-size: 18vw;}#bg-contents-text { background-attachment: scroll;}#text-g-inner h2 { font-size: 140%;}#bg-greeting { background-attachment: scroll;}
#top_painting_banner:hover .top_painting_banner_contents::before,#top_sink-area_banner:hover .top_sink-area_banner_contents::before { left: -100% !important}
#top-contents dl {padding: 0 1rem;}#illust04 {position: relative;	top: 0;}
.choice-btn li{ width:calc(100% / 4)!important;}#top-voice li i {font-size: 400%;}#top-voice figcaption {font-size: 100%;}#top-voice .before-after {position: absolute; top: 0;	left: 2rem;}#top-voice .before-after p { font-size: 230%;}#manga {width: 90%;	margin: auto;}}