/*  */
.plugo-aozora_index header { background-color: transparent; border-bottom: none }
.plugo-aozora_index header .plugoLogo { position: absolute; right: 50px; top: 20px }
.plugo-aozora_index header .plugoLogo img { height: 30px; display: inline-block }
.box { width: 100vw; height: 100vh; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }
.mainVisual { background-image: url(img/mainvisual-aozora.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; }
.mainVisual p { position: absolute; bottom: 0; font-size: 40px; background: rgba(70,188,255,0.4); width: 100%; left: 0; text-align: center; font-family: "kozuka-mincho-pro", serif; font-weight: 700; font-style: normal; transform: scale(1.2, 1);opacity: 0; }
.active01 { -webkit-animation-name: fadein01; animation-name: fadein01; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: translate(20px); transform: translateY(20px); }
@-webkit-keyframes fadein01 {
	0% { opacity: 0; }
	100% { opacity: 1;}
}
@keyframes fadein01 {
	0% { opacity: 0; }
	100% { opacity: 1;}
}
.scroll { position: absolute; bottom: -30px; left: 48%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); text-decoration: none; padding-top: 60px; color: #000; font-size: 16px; font-family: soleil, sans-serif; font-style: normal; font-weight: 400 }
.scroll span { position: absolute; top: 5px; left: 48%; width: 20px; height: 20px; margin-left: -10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb 1.5s infinite; animation: sdb 1.5s infinite; box-sizing: border-box }
@-webkit-keyframes sdb{
	0%{-webkit-transform:rotate(-45deg) translate(0,0);opacity:0}
	50%{opacity:1}
	100%{-webkit-transform:rotate(-45deg) translate(-20px,20px);opacity:0}
}
@keyframes sdb{
	0%{transform:rotate(-45deg) translate(0,0);opacity:0}
	50%{opacity:1}
	100%{transform:rotate(-45deg) translate(-20px,20px);opacity:0}
}

.introduction01 { text-align: center; }
.introduction01 img { margin: 0 auto; }
.subVisual01 { width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-image: url(img/subvisual-aozora-01.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center }
.subVisual01 img { display: none; }
.subVisual02 { width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-image: url(img/subvisual-aozora-02.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center }
.subVisual02 img { display: none; }
.subVisual03 { width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-image: url(img/subvisual-aozora-03.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center }
.subVisual03 img { display: none; }
.about { width: 100vw; height: 70vh; position: relative; overflow: hidden; font-size: 20px; line-height: 1.8; margin: 20vh 0; }
.about b { margin-top: .5em; font-weight: bold; text-align: left; }
.about img { display: none; }
.about:before { display: block; content: ""; width: 50%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(img/subvisual-aozora-04.jpg); background-position: 40% 84%; background-repeat: no-repeat; background-size: 135%; z-index: 0 }
.about div { width: 50%; height: 100%; float: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 20px }
.fadein02 { opacity: 0; }
.active02 { -webkit-animation-name: fadein02; animation-name: fadein02; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: translate(20px); transform: translateY(20px); }
@-webkit-keyframes fadein02 {
	0% { opacity: 0; }
	100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); }
}
@keyframes fadein02 {
	0% { opacity: 0; }
	100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); }
}
.catch { display: none; }
.detail { background-color: #f5f5f5 }
.detail .info { padding: 60px 0 0; font-size: 20px; text-align: center; }
.detail .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 0 70px; display: flex; justify-content: space-between; flex-wrap: wrap }
.detail .item { width: 31%; margin-bottom: 50px; font-size: 16px }
.detail .item .point { font-size: 18px; margin: 15px 0 5px; font-weight: 600 }
.relateditem { margin: 0 auto 70px; text-align: center; display: flex; justify-content: space-evenly; align-items: flex-end; max-width: 1200px; }
.relateditem .item {text-align: center; margin:0 30px;}
.relateditem p { font-size: 18px; margin-bottom: .5em; font-weight: 600 }
.relateditem p a { color: #000; text-decoration: none; }
.relateditem p a:hover { text-decoration: underline; }
.relateditem img { width: 400px; display: inline; }
.relateditem a img:hover { opacity: .7; }
.people { width: 100vw; height: 55vh; position: relative; overflow: hidden; }
.people01 { background-image: url(img/people01.jpg); background-size: cover }
.people03 { background-image: url(img/people03.jpg); background-size: cover }
.people01 .wrap { width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 16px }
.people03 .wrap { width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 16px }
.people01 .wrap .summary { width: 40%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 22px }
.people03 .wrap .summary { width: 45%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 22px }
.people .title { font-size: 18px; font-weight: 500; margin-bottom: 10px; color: #000 }
.people .title span { font-family: soleil, sans-serif; font-size: 20px; font-weight: 400; padding-left: .5em }
.people .name { font-size: 18px; font-weight: 500; margin-bottom: 20px; color: #000 }
.people a.more { display: block; width: 250px; padding: 15px 50px; text-align: center; color: #000; background: #fff; border: 1px solid #666; opacity: .7; font-size: 14px; text-decoration: none; transition: .5s; -webkit-transition: .5s; margin: 40px auto 0 }
.people a.more:hover { background: #000; border: 1px solid #000; color: #fff; opacity: 1 }
.buy { background: #fff; border-top: 1px solid #ccc }
.buy .wrap { width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center }
.buy .product dt { font-size: 30px }
.buy .product dd span { font-size: 26px; font-family: soleil, sans-serif; font-style: normal; font-weight: 400 }
.buy .spec { width: 600px; margin: 0 auto; font-size: 13px; }
.buy .spec caption { text-align: left; font-size: 16px; font-weight: bold; margin-bottom: 10px; padding-left: 5px; }
.buy .spec th { text-align: left; border-bottom: 1px solid #eee; padding: 5px; width: 180px; }
.buy .spec td { text-align: left; border-bottom: 1px solid #eee; padding: 5px; }
.buy a.more { display: block; width: 280px; border: 1px solid #000; background: #000; padding: 15px 20px; text-align: center; color: #fff; font-size: 14px; text-decoration: none; transition: .5s; -webkit-transition: .5s; margin: 30px 0 40px; }
.buy a.more:hover { background: #fff; color: #000 }
.buy .soldout { display: block; width: 280px; border: 1px solid #e60000; background: #fff; padding: 15px 20px; text-align: center; color: #e60000; font-size: 14px; text-decoration: none; transition: .5s; -webkit-transition: .5s; margin: 30px 0 40px; }
@media screen and (max-width:1240px) {
	.detail .wrap { padding: 50px }
	.people .wrap { padding: 0 50px }
}
@media screen and (max-width:768px) {
	.plugo-aozora_index header .plugoLogo { position: relative; top: inherit; right: inherit; float: right }
	.plugo-aozora_index header .plugoLogo img { height: 20px; width: auto; display: block }
	.box { width: 100%; }
	.mainVisual { background-image: url(img/mainvisual-aozora_sp.jpg); background-position: center center;/*background-size: inherit;*/ height: 50vh; }
	.mainVisual p { display:none;}
	.scroll { margin-left: -16px; }
	.scroll span { border-left: 2px solid #000; border-bottom: 2px solid #000; }
	.about { width: 100%; height: auto; font-size: 14px; line-height: 1.8; margin: 5vh 0; }
	.about:before { display: none; }
	.about div { width: 100%; height: auto; float: none; display: block; padding: 1em 20px 0; }
	.subVisual01, .subVisual02, .subVisual03, .subVisual04, .subVisual05 { height: auto; background: none; padding: 0 0 30px; overflow: hidden; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
	.subVisual01 img, .subVisual02 img, .subVisual03 img, .subVisual04 img, .subVisual05 img, .about img { display: block; }
	.catch { display: block; font-size: 22px; margin: 0 0 1em;/*text-align: center;*/ }
	.detail .info { padding: 40px 0 0; font-size: 14px; }
	.detail .wrap { padding: 40px 20px 0 }
	.detail .item { width: 100%; margin-bottom: 40px; font-size: 14px }
	.detail .item .point { font-size: 16px; margin: 15px 0 5px; font-weight: 500 }
	.relateditem {margin:0 auto 50px; flex-wrap: wrap;}
	.relateditem .item { width: 42%; margin:0 0 30px;}
	.relateditem p { font-size: 14px; }
	.relateditem img { width: 100%; }
	.people { height: auto; background: none; padding: 0 }
	.people .wrap { padding: 30px 20px; }
	.people01 .wrap { padding-top: 60px; }
	.people .wrap .summary { width: 100%; font-size: 15px }
	.people .title { color: #333; font-size: 14px; margin: 20px 0 0; }
	.people .title span { font-size: 14px }
	.people .name { font-size: 14px; margin-bottom: 5px }
	.people a.more { width: 100%; padding: 10px; border: 1px solid #000; box-sizing: border-box; color: #333; font-size: 14px; opacity: 1; margin-top: 15px; transition: inherit; }
	.buy .wrap { padding: 30px 20px 60px }
	.buy .product dt { font-size: 20px }
	.buy .product dd span { font-size: 18px }
	.buy .spec { width: 100%; font-size: 12px; }
	.buy .spec caption { font-size: 14px; }
	.buy .spec th { width: 11em; vertical-align: top; }
	.buy a.more { width: 100%; border: 1px solid #000; padding: 10px; box-sizing: border-box; font-size: 14px; transition: inherit; }
}

/*@supports (-webkit-touch-callout:none){
	.mainVisual{    /* Safari用のハック */
height: -webkit-fill-available; }
}
*/