@charset "UTF-8";

/* 全体
------------------------------------------------------------------ */
body {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* 画像切り替え表示 */
@media screen and (min-width: 769px) {	/* PC */
	.pc {
		display: inline-block;
	}
	.sp {
		display: none;
	}
}
@media (max-width: 768px) {	/* SP */
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
}
/* hover */
@media screen and (min-width: 769px) {	/* PC */
	.linkbtn {
		opacity: 1.0;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	.linkbtn:hover {
		opacity: 0.7;
	}
}

/* COLOR
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.c-sumi { color: #4d4d4d; }
	.c-blue { color: #fff; }
	.c-skyb { color: #0096df; }
	.c-siro { color: #fff; }
	.c-gray { color: #666; }
}
@media (max-width: 768px) {	/* SP */
	.c-sumi { color: #4d4d4d; }
	.c-blue { color: #00428d; }
	.c-skyb { color: #0096df; }
	.c-siro { color: #fff; }
	.c-gray { color: #666; }
}

/* FONT
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.fN3442 {
		font-size: 22px;
		line-height: 34px;
		font-weight: normal;
		letter-spacing: 0.05em;
	}
	.fN3236 {
		font-size: 21px;
		line-height: 34px;
		font-weight: normal;
		letter-spacing: 0.05em;
	}
	.fN3042 {
		font-size: 18px;
		line-height: 26px;
		font-weight: normal;
		letter-spacing: 0.05em;
	}
	.fN2650 {
		font-size: 16px;
		line-height: 30px;
		font-weight: normal;
	}
	.fN2642 {
		font-size: 14px;
		line-height: 26px;
		font-weight: normal;
	}
	.fN2234 {
		font-size: 12px;
		line-height: 20px;
		font-weight: normal;
	}
	.fN1426 {
		font-size: 14px;
		line-height: 26px;
		font-weight: normal;
	}
	.fN1122 {
		font-size: 11px;
		line-height: 22px;
		font-weight: normal;
	}
}
@media (max-width: 768px) {	/* SP */
	.fN3442 {
		font-size: 17px;
		line-height: 21px;
		font-weight: normal;
		letter-spacing: 0.1em;
	}
	.fN3236 {
		font-size: 16px;
		line-height: 18px;
		font-weight: normal;
		letter-spacing: 0.05em;
	}
	.fN3042 {
		font-size: 15px;
		line-height: 21px;
		font-weight: normal;
		letter-spacing: 0.1em;
	}
	.fN2650 {
		font-size: 13px;
		line-height: 28px;
		font-weight: normal;
	}
	.fN2642 {
		font-size: 13px;
		line-height: 24px;
		font-weight: normal;
	}
	.fN2234 {
		font-size: 11px;
		line-height: 21px;
		font-weight: normal;
	}
	.fN1426 {
		font-size: 13px;
		line-height: 22px;
		font-weight: normal;
		letter-spacing: 0.025em;
	}
	.fN1221 {
		font-size: 11px;
		line-height: 20px;
		font-weight: normal;
		letter-spacing: 0.025em;
	}
	.fN1221sp {
		font-size: 11px;
		line-height: 18px;
		font-weight: normal;
		letter-spacing: 0.025em;
		color: #666;
	}
	.fN1122 {
		font-size: 11px;
		line-height: 18px;
		font-weight: normal;
	}
}

/* #baystars
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	div#baystars
	{
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
		font: 13px/18px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		letter-spacing: -0.0125rem;
		color: #4d4d4d;
		overflow: hidden;
		background-color: #d7e1ed;
		background-image: url(../img/body_bg.png);
		background-position: center top;
		background-repeat: repeat-x;
		-moz-background-size: 100px auto;
		background-size: 100px auto;
		opacity: 0;
		animation: show 3s both;
		animation-delay: 0s;
		display: block;
	}
	div#bs-wrap
	{
		width: 1100px;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
	  display: flex;
	  flex-flow: row wrap;
	}
	
	#bs-wrap #titile{order: 1;}
	/* #bs-wrap #iloveyokohama{order: 3;}
	#bs-wrap #items{order: 2;} */
	
	#baystars a {	text-decoration: underline; color: #fff;	}
	#baystars a:hover {	text-decoration: none;	}
	
}
@media (max-width: 768px) {	/* SP */
	div#baystars
	{
		width: 100%;
		margin: 0px auto;
		padding-top: -100px;
		text-align: center;
		overflow: hidden;
		display: block;
		background-color: #d7e1ed;
		background-image: url(../img/SP_title_bg0.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: 100% auto;
		background-size:100% auto;
		position: relative;
		opacity: 0;
		animation: show 2s both;
		animation-delay: 0s;
	}
	
	#baystars a {	text-decoration: underline; color: #00428d;	}
	#baystars a:hover {	text-decoration: none;	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {	/* iPad */
	div#baystars
	{
		width: 100%;
		margin: 0px auto;
		padding-top: -100px;
		text-align: center;
		overflow: hidden;
		display: block;
		background-color: #f3f3f3;
		background-image: url(../img/SP_title_bg0.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: 100% auto;
		background-size:100% auto;
		position: relative;
		opacity: 0;
		animation: show 2s both;
		animation-delay: 0s;
	}
	
	#baystars a {	text-decoration: underline; color: #00428d;	}
	#baystars a:hover {	text-decoration: none;	}
}

/* #title
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#baystars #title
	{
		width: 1100px;
		height: 264px;
		overflow: hidden;
		margin: 0 auto 0px;
		padding: 0px 0px 0px;
		display: block;
		background-color: #fff;
		background-image: url(../img/title_bg0.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: 100% auto;
		background-size: 100% auto;
		opacity: 1;
	}
	#baystars #title .inner
	{
		width: 100%;
		height: 264px;
		overflow: hidden;
		margin: 0px auto 0px;
		padding: 0px 0px 0px;
		display: block;
		
		/* 
		background-color: #00428d;
		background-image: url(../img/title_bg1.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: 100% auto;
		background-size: 100% auto; */
		opacity: 0;
		animation: show 3s both;
		animation-delay: 0.5s;
	}
	#baystars #title h1
	{
		width: 638px;
		height: auto;
		margin: 0px auto;
		padding: 90px 0px 0px 0px;
		display: block;
		opacity: 0;
		box-sizing: border-box;
	}
	#baystars #title h1 img
	{
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
	}
}
@media (max-width: 768px) {	/* SP */
	#baystars #title
	{
		width: 100%;
		height: 0;
		margin: 0px auto 0px;
		padding: 0px 0px calc( 263 / 750 * 100%);
		display: block;
		background-color: none;
		background-image: url(../img/SP_title_bg0.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: 100% auto;
		background-size: 100% auto;
		opacity: 0;
		animation: show 3s both;
		animation-delay: 0.5s;
	}
	#baystars #title .inner
	{
		width: 100%;
		height: 620px;
		margin: 0px auto 0px;
		padding: 0px 0px 0px;
		display: block;
		/* background-color: none;
		background-image: url(../img/SP_title_bg1.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: 100% auto;
		background-size: 100% auto; */
		opacity: 0;
		animation: show 3s both;
		animation-delay: 0.5s;
	}
	#baystars #title h1
	{
		width: 90vw;
		height: auto;
		margin: 0px auto 0px;
		padding: 40px 0px 0px;
		display: block;
		text-align: center;
		opacity: 0;
	}
	#baystars #title h1 img
	{
		width: 100%;
		max-width: 648px;
		height: auto;
		margin: 0px auto;
		padding: 0px;
	}
}
@keyframes show {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
#animate {
	animation-duration: 1.0s;
}
/* #powerofstars
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#baystars #powerofstars
	{
		width: 1100px;
		height: auto;
		margin: 0px auto 0px;
		padding: 50px 0px 60px;
		display: block;
		background: #fff;
		position: relative;
	}
	#powerofstars .inner
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		text-align: center;
	}
	.box5
	{
		opacity: 0;
	}
	#powerofstars h2
	{
		width: 100%;
		height: auto;
		margin: -70px auto -40px;
		padding: 0px;
		display: block;
		opacity: 0;
	}
	#powerofstars h3
	{
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px 0px 10px;
		display: block;
		text-align: center;
	}
	#powerofstars p
	{
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: block;
		text-align: center;
	}
	#powerofstars img
	{
		margin: 70px auto 20px;
		padding: 0px;
	}
	#powerofstars img.option
	{
		margin: -20px auto 50px;
		padding: 0px;
	}
	#powerofstars #sp_pic
	{
		position: relative;
	}
	#powerofstars #sp_read
	{
		display: none;
	}
}
@media (max-width: 768px) {	/* SP */
	#baystars #powerofstars
	{
		width: 96%;
		height: auto;
		margin: 1px auto 0px;
		padding: 20px 0px 20px;
		display: block;
		background: #fff;
		position: relative;
	}
	#powerofstars .inner
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		text-align: center;
	}
	.box5
	{
		opacity: 0;
	}
	#powerofstars img
	{
		width: 100%;
		height: auto;
		margin: 40px auto 20px;
		padding: 0px;
	}
	#powerofstars h2
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		opacity: 0;
	}
	#powerofstars h2 img
	{
		width: 215px;
		height: auto;
		margin: 0px auto 20px;
		padding: 0px;
	}
	#powerofstars h3
	{
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px 0px 10px;
		display: block;
		text-align: center;
	}
	#powerofstars p
	{
		width: 90%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: block;
		text-align: left;
	}
	#powerofstars img.option
	{
		width: 219px;
		height: auto;
		margin: -20px auto 20px;
		padding: 0px;
	}
	#powerofstars #sp_pic
	{
		margin: -40px auto 20px;
		position: relative;
	}
	#powerofstars #sp_read
	{
		width: 48vw;
		height: auto;
		display: block;
		margin: 0px 0px 0px 15px;
		padding: 0px;
		text-align: left;
		letter-spacing: 0.025em;
		position: absolute;
		left: 0;
		top: 100px;
	}
}

/* #iloveyokohama
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#baystars #iloveyokohama,
	#baystars #box
	{
		width: 1100px;
		height: auto;
		margin: 0 auto ;
		padding: 50px 0px 60px;
		display: block;
		background: #fff;
		position: relative;
	}

	#baystars #box{
		margin-top: 50px;
	}

	#iloveyokohama .inner,
	#baystars #box .inner
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		text-align: center;
	}
	#iloveyokohama h2
	{
		width: 100%;
		height: auto;
		margin: -70px auto 0px;
		padding: 0px;
		display: block;
		opacity: 0;
	}
	#iloveyokohama h3
	{
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px 0px 10px;
		display: block;
		text-align: center;
	}
	#iloveyokohama p
	{
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: block;
		text-align: center;
	}
	#iloveyokohama img
	{
		margin: 70px auto 20px;
		padding: 0px;
	}
}
@media (max-width: 768px) {	/* SP */
	#baystars #iloveyokohama,
	#baystars #box
	{
		width: 96%;
		height: auto;
		margin: 20px auto 0px;
		padding: 20px 0px 20px;
		display: block;
		background: #fff;
		position: relative;
	}
	#iloveyokohama .inner,
	#baystars #box .inner
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		text-align: center;
	}
	.box5
	{
		opacity: 0;
	}
	#iloveyokohama img,
	#baystars #box img
	{
		width: 100%;
		height: auto;
		margin: 40px auto 20px;
		padding: 0px;
	}
	#iloveyokohama h2
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		opacity: 0;
	}
	#iloveyokohama h2 img
	{
		width: 215px;
		height: auto;
		margin: 0px auto 20px;
		padding: 0px;
	}
	#iloveyokohama h3
	{
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px 0px 10px;
		display: block;
		text-align: center;
	}
	#iloveyokohama p,
	#box p
	{
		width: 90%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: block;
		text-align: left;
	}
	#iloveyokohama img.option
	{
		width: 219px;
		height: auto;
		margin: -20px auto 20px;
		padding: 0px;
	}
	#iloveyokohama #sp_pic
	{
		margin: -40px auto 20px;
		position: relative;
	}
	#iloveyokohama #sp_read
	{
		width: 48vw;
		height: auto;
		display: block;
		margin: 0px 0px 0px 15px;
		padding: 0px;
		text-align: left;
		letter-spacing: 0.025em;
		position: absolute;
		left: 0;
		top: 100px;
	}
}

/* SHOP
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#shop
	{
		width: 1100px;
		margin: 50px auto;
		padding: 2%;
		display: block;
		background: #00428d;
	}
	#shop h3
	{
		width: 100%;
		margin: 20px auto 0px;
		padding: 0px;
		text-align: center;
		display: block;
		color: #fff !important;
	}
	#shop p.shoplist
	{
		width: 100%;
		margin: 20px auto 20px;
		padding: 0px;
		text-align: center;
		display: block;
		color: #fff !important;
	}
}
@media (max-width: 768px) {	/* SP */
	#shop
	{
		width: 96%;
		margin: 20px auto 0px;
		padding: 2%;
		display: block;
		box-sizing: border-box;
		background: rgba(255,255,255,1.0);
	}
	#shop h3
	{
		width: 100%;
		margin: 20px auto 0px;
		padding: 0px;
		text-align: center;
		display: block;
	}
	#shop p.shoplist
	{
		width: 100%;
		margin: 20px auto 20px;
		padding: 0px;
		text-align: center;
		display: block;
	}
}

/* SHARE
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#baystars #share-link
	{
		width: 100%;
		margin: 0px auto 70px;
		padding: 0px 0px 0px;
		overflow: hidden;
	}
	#share-link h3
	{
		width: 100%;
		height: auto;
		margin: 0px auto 20px;
		padding: 0px;
		display: block;
	}
	#share-link ul
	{
		width: 100%;
		margin: 0px auto 0px;
		padding: 0px;
		list-style: none;
		font-size: 0;
	}
	#share-link ul li
	{
		width: 40px;
		height: 40px;
		margin: 0px 25px 0px 0px;
		padding: 0px;
		display: inline-block;
		vertical-align: middle;
	}
	#share-link ul li:last-child
	{
		width: 40px;
		height: 40px;
		margin: 0px 10px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#share-link ul li a img
	{
		width: 40px;
		height: 40px;
		display: block;
	}
}
@media (max-width: 768px) {	/* SP */
	#share-link
	{
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px 0px 30px;
		text-align: center;
		overflow: hidden;
		background: none;
	}
	#share-link h3
	{
		width: 100%;
		height: auto;
		margin: 20px auto 10px;
		padding: 0px;
		color: #00428d;
		display: block;
	}
	#share-link ul
	{
		margin: 0px auto 0px;
		padding: 0px;
		list-style: none;
		font-size: 0;
	}
	#share-link ul li
	{
		height: 36px;
		margin: 0px 20px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#share-link ul li:last-child
	{
		height: 36px;
		margin: 0px 0px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#share-link ul li img
	{
		height: 36px;
	}
}



@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

/* ADD2023 */
.lead{
	width: 90%;
    height: auto;
    margin: 30px auto;
    padding: 0px;
    display: block;
	    line-height: 2;
    font-size: 14px;
}

.item_ttl{
	font-family: 'Rubik', sans-serif;
    font-size: 38px;
    color: #00428d;
    font-weight: 600;
    margin-top: 80px !important;
    letter-spacing: 0.05em;
}


.item_ttl + .box5 img{
	margin: 30px auto 20px !important;
}

#box h3{
	margin-bottom: 50px;
}

.zoom{
    border: 1px solid #00428d;
    width: 90%;
    max-width: 600px;
    margin: 50px auto;
	padding: 0 30px 30px;
}


@media (max-width: 768px){
.lead{
font-size: 13px;
}
.item_ttl{
	font-size: 24px;
}
#box h3{
	margin-bottom: 0;
}

.zoom{
	padding: 0 10px 20px;
}

}