/* ==========================================================================
   Public
============================================================================= */
@import url('../fontawesome-free-7.1.0-web/css/all.min.css');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css'); /* 思源圓體 */

html { scroll-behavior:smooth; }

body { 
	font:1vw/1.6 Arial, "cwTeXYen", "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	word-spacing:0.16em;
	color:#222;
	background:url("../img/bg.jpg") bottom center no-repeat;
	background-size:100%;
	word-wrap:break-word;
}
@media screen and (orientation:portrait) {
	body { font-size:1.125em; background:url("../img/bg.jpg") bottom 35vh center no-repeat; background-size:100%; width:100vw; overflow-x:hidden; }
}

@media screen and (max-width:680px) {
	body { background:url("../img/bg.jpg") bottom 65vh center no-repeat; background-size:100%; }
}



*[lang|=zh], *[lang|=zh] * { letter-spacing:0.14em; }
*[lang|=zh], *[lang]:not([lang|=zh]) { letter-spacing:0.12em; }


img {
	border:none;
	vertical-align:middle;
	
	width:100%;
	height:100%;
	object-fit:cover;
	
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */	
	image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */    
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	text-decoration:none;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
a:focus {
	box-shadow:0 0 0 2px #c6494f;
    outline:2px solid #c6494f;
}
:focus:not(.focus-visible){ outline:none; } /* 瀏覽器初始focus樣式關閉 */


.clearfix {
    clear: both;
    display: table;
}


input, select, textarea {
	color:#222;
	border-radius:3px;
	background:#efefef;
	border:#949494 1px solid;
}

input:focus, select:focus {
    border-color:#a90051;
    box-shadow:0 0 6px 0 #a90051;
	color:#FFF;
	background:#333;
}



::-webkit-input-placeholder { color:#555; font-size:90%; }
:-moz-placeholder { color:#555; font-size:90%; }

:focus::-webkit-input-placeholder { color:#FFF; }
:focus:-moz-placeholder { color:#FFF; }​



input[type="checkbox"], input[type="radio"] { width:2vw; height:2vw; vertical-align:middle; margin-right:5px; }


.icon_guide {
	position:absolute;
	top:0; left:2px;
	font-size:0.75em!important;
	font-weight:normal!important;
	font-family:Arial!important;
}
.icon_guide a { color:#222!important; text-decoration:none; }

@media screen and (orientation:portrait) {
	input[type="checkbox"], input[type="radio"] { width:30px; height:30px; }
	.icon_guide { display:none; }
}

/*
.sr-only {
	position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}
*/


.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    border:0
}
.sr-only-focusable:active,.sr-only-focusable:focus{
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto
}



/* mobile nav
-----------------------------------------------------------------------------*/
#mobile-nav input {
	width:100%;
	font-size:120%;
	/*padding:10px;*/
	border-radius:3px;
	margin-bottom:10px;
}
#mobile-nav input:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#000;
	background:#93fff7;
}

.sp_logo { position:fixed; left:25px; top:8px; z-index:100; }
.sp_logo img { width:100%; }




/* header
-----------------------------------------------------------------------------*/
header {
	position:relative;
	width:100%;
	height:7vw;
	background:url("../img/top-bg.jpg") center center no-repeat;
	background-size:100%;
}

header .top {
	width:100%;
	display:grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: auto;
}

header .logo { padding-left:6vw; margin-top:0.7vw; }
header .logo img { width:18vw; max-width:400px; }

header .menu { text-align:right; padding-right:3vw; padding-top:2vw; }
header .menu a {
	display:inline-block;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	font-weight:600;
	color:#0d60a2;
	font-size:135%;
	padding:0.5vw 1vw;
	border-right:#d8d8d8 2px dashed;
}

header .menu a:nth-last-child(1) { border-right:none; }
header .menu a img { width:1.8vw; margin-right:2px; }
header .menu a:is(:hover, :focus) { color:var(--pink); }
@media screen and (orientation:portrait) {
	header { display:none; }
}


/* banner
-----------------------------------------------------------------------------*/
#banner { width:100%; margin-bottom:5vw; }
#banner img {
	width:100%;
	height:auto;
	border:#c84081 1px solid; border-left:none; border-right:none;
    /*aspect-ratio: attr(width) / attr(height);*/
}

@media screen and (orientation:portrait) {
	#banner { margin-top:57px; }
}




/* HOME
------------------------------------------------------------------------------ */
#home {
	position:relative;
	margin:0 auto;
	width:82%;	
}

.home_news { position:relative; width:100%; margin-bottom:5vw; }
.home_news h2 img { width:18vw; }
.home_news ul { width:100%; border:#f0bbd4 0.5vw solid; border-radius:1.5vw; }
.home_news li a {
	display:block;
	color:#222;
	font-size:120%;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	padding:1.2vw 2vw;
	border-bottom:#f0bbd4 2px dotted;
}
.home_news li:nth-child(1) a { border-radius:1.1vw 1.1vw 0 0; }
.home_news li:nth-last-child(1) a { border-bottom:none; border-radius:0 0 1.1vw 1.1vw; }
.home_news li a span { color:var(--blue); margin-right:3vw; letter-spacing:1px; }
.home_news li a:is(:hover, :focus) { background:var(--pink); color:#FFF; }
.home_news li a:is(:hover, :focus) span { color:#FFF; }

.home_news .more {
	position:absolute;
	top:3.6vw;
	right:0;
}
.home_news .more a {
	padding:0.5vw 0.5vw 0.7vw 1.5vw;
	color:#FFF;
	background:var(--pink);
	border-radius:99em;
}
.home_news .more a:is(:hover, :focus) { background:#333; }
.home_news .more a i { opacity:0.6; vertical-align:middle; margin-left:0.5vw; }


@media screen and (orientation:portrait) {
	#home { width:88%; }
	.home_news { margin-bottom:30px; }
	.home_news h2 img { width:50%; }
	.home_news ul { border:#f0bbd4 4px solid; border-radius:10px; }
	.home_news li a { font-size:100%; padding:12px 10px 12px 18px; line-height:130%; overflow:visible; white-space:normal; text-overflow:clip;  }
	.home_news li a span { display:block; font-size:80%; }
	.home_news .more { top:20px; }
	.home_news .more a { padding:10px 5px 10px 15px; font-size:80%; }
}


.home_video {
	width:100%;
	border:#ecb2cd 1.5vw solid;
	box-shadow:rgba(255, 0, 119, 0.3) 0px 2px 8px 0px;
	border-radius:1.5vw;
	margin-bottom:5vw;
}

.home_video2 { width:100%; }
.home_video2 video {
	padding:0;
	margin:0;
	border:#ecb2cd 1.5vw solid;
	box-shadow:rgba(255, 0, 119, 0.3) 0px 2px 8px 0px;
	border-radius:1.5vw;
	margin-bottom:5vw;
}

@media screen and (orientation:portrait) {
	.home_video { border:#ecb2cd 6px solid; margin-bottom:30px; border-radius:10px;}
	.home_video2 video { border:#ecb2cd 6px solid; margin-bottom:30px; border-radius:10px; }
}


.home_keypoint {
	display:grid;
	grid-template-columns:48% 4% 48%;
	grid-template-rows:auto;
	margin:6vw 0;
}

.home_package {
	position:relative;
	width:100%;
	border-radius:1vw;
	background:#ecb2cd;
	padding:5.2vw 1.5vw 1.5vw;
	box-shadow:rgba(255, 0, 119, 0.3) 0px 2px 8px 0px;
}

.home_package h2 {
	position:absolute;
	top:-2.4vw;
	left:0;
	width:100%;
	text-align:center;
	font-size:300%;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	font-weight:600;
	color:#7b3656;
	padding-right:2.5vw;
}
.home_package h2 img { width:18%; max-width:237px; vertical-align:baseline; }

.home_package .schematic { width:100%; border:#FFF 1px solid; }
.home_package .schematic img { width:100%; }

@media screen and (orientation:portrait) {
	.home_keypoint { display:block; margin:50px 0; }
	.home_package { border-radius:10px; padding:15vw 10px 10px; margin:12vw 0; }
	.home_package h2 { top:-5.5vw; font-size:8vw; }
	.home_package h2 img { width:20%; }	
	.none { display:none; }
}


.home_keypoint2 {
	margin:6vw auto;
	width:60%;
}

.home_package2 {
	position:relative;
	width:100%;
	border-radius:1vw;
	background:#ecb2cd;
	padding:5.2vw 1.5vw 1.5vw;
	box-shadow:rgba(255, 0, 119, 0.3) 0px 2px 8px 0px;
}

.home_package2 h2 {
	position:absolute;
	top:-4vw;
	left:0;
	width:100%;
	font-size:300%;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	font-weight:600;
	color:#7b3656;
	padding-left:10%;
}
.home_package2 h2 img { width:21%; max-width:237px; vertical-align:baseline; }

.home_package2 .schematic { width:100%; border:#FFF 1px solid; }
.home_package2 .schematic img { width:100%; }

@media screen and (orientation:portrait) {
	.home_keypoint2 { display:block; margin:0; width:100%; }
	.home_package2 { border-radius:10px; padding:15vw 10px 10px; margin:12vw 0; }
	.home_package2 h2 { top:-5.5vw; font-size:8vw; }
	.home_package2 h2 img { width:25%; }	
}






/* content
------------------------------------------------------------------------------ */
.banner_page { width:100%; border:#c84081 1px solid; border-left:none; border-right:none;  }
@media screen and (orientation:portrait) {
	.banner_page { margin-top:55px; overflow-x:hidden; }
	.banner_page img { display:block; width:115%; margin-left:-10%; }
}

.breadcrumb { width:100%; font-size:0.75em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-top:1vw; }
.breadcrumb i { color:#a83997; padding-right:5px;}
.breadcrumb a { color:#222; text-decoration:underline; }
.breadcrumb a:hover, .breadcrumb a:focus { color:#c25700; }

@media screen and (orientation:portrait) {
	.breadcrumb { display:none; }
}


.share_link { width:100%; text-align:right; }
.share_link li { display:inline-block; font-size:250%; }
.share_link li:nth-child(1) a { color:#3b5998; }
.share_link li:nth-child(2) a { color:#222; }
.share_link li:nth-child(3) a { position:relative; color:#40822a; font-size:90%; bottom:2px; }
.share_link li a:hover, .share_link li a:focus { color:#c5015f; box-shadow:none; outline:none; }

@media screen and (orientation:portrait) {
	.share_link li { font-size:260%; }
}


.search { position:absolute; top:2.5vw; left:0; width:65%; text-align:right; }
.search input { padding:0.6vw; border:#c5015f 1px solid; border-radius:4px; vertical-align:middle; }
.search a { display:inline-block; background:#c5015f; color:#FFF; padding:0.45vw 0.8vw; border-radius:4px; vertical-align:middle; }
.search a:is(:hover, :focus) { background:#333; }

@media screen and (orientation:portrait) {
	.search { position:static; width:100%; text-align:center; margin-bottom:15px; }
	.search input { padding:15px; }
	.search a { padding:13px 15px; }
}
@media screen and (max-width:680px) {
	.search input { width:calc(100% - 110px); }
	.search a { font-size:90%; }
}

.content { width:100%; min-height:30vh; margin-top:-2vw; margin-bottom:5vw; }
.content h2 { width:85%; font-size:160%; font-weight:600; font-family:"cwTeXYen", "Meiryo UI", sans-serif; padding-bottom:0.8vw; }
.content h2 span { display:block; font-size:60%; font-weight:normal; color:var(--blue); }
.content p { margin-bottom:1.5vw; }
.content img { max-width:100%; }
.content a { color:#882d58; }
.content a:is(:hover, :focus) { text-decoration:underline; }

@media screen and (orientation:portrait) {
	.content { margin-bottom:50px; }
	.content h2 { width:100%; line-height:120%; font-size:130%; padding-bottom:15px; }
	.content p { margin-bottom:20px; }
}

.download { width:100%; }
.download ul { width:100%; margin-top:3vw; }
.download li { display:inline-block;}
.download li a {
	display:block;
	color:#FFF;
	border-radius:99em;
	padding:1vw 2vw;
	background:var(--blue);
	margin-bottom:1vw;
}
.download li a i { opacity:0.6; vertical-align:middle; font-size:120%; }
.download li a:is(:hover, :focus) { background:var(--pink); }
@media screen and (orientation:portrait) {
	.download li a { padding:15px 20px; margin-bottom:15px; }
}


.p_line { width:100%; height:1px; border-bottom:#bbb 1px solid; margin-bottom:1.5vw; }
@media screen and (orientation:portrait) {
	.p_line { margin-bottom:20px; }
}

.txt { background:#ffe235; }



/* mayor
------------------------------------------------------------------------------ */
.mayor {
	padding-top:1vw;
	font-size:140%;
}
.mayor .name {
	width:100%;
	text-align:right;
}
.mayor .name img { width:10vw; vertical-align:middle; }


@media screen and (orientation:portrait) {
	.mayor { font-size:100%; }
	.mayor .name img { width:30vw; }
}




/* Q&A
------------------------------------------------------------------------------ */
.tab {
	position:relative;
	width:100%;
	text-align:center;
	z-index:2;
	bottom:-0.45vw;
}

.tab li {
	display:inline-block;
	font-weight:600;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	font-size:150%;
	border:#f0bbd4 0.5vw solid;
	border-bottom:none;
	border-radius:1vw 1vw 0 0;
	color:var(--pink);
	background:#FFF;
	margin:0 0.5vw;
}
.tab li a {
	display:block;
	background:var(--pink);
	color:#FFf;
	padding:0.8vw 2vw 0.5vw;
	border-radius:0.6vw 0.6vw 0 0;
	border-bottom:#f0bbd4 0.5vw solid;
}
.tab li a:is(:hover, :focus) { background:#333; }
.tab .action {
	padding:0.8vw 2vw 0.5vw;
	color:var(--pink);
	background:#FFF;
	border-bottom:#FFF 0.5vw solid;
}

.tab select { display:none; }


.faq {
	width:100%;
	border:#f0bbd4 0.5vw solid;
	border-radius:1.5vw;
	background:#FFF;
	padding:2vw 3vw;
	margin-bottom:5vw;
}

.faq_select { margin:2vw 0 8vw; text-align:center; }
.faq_select img { width:30%; max-width:560px; }
.faq_select a:is(:hover, :focus) { opacity:0.6; }

.faq_title {
	text-align:center;
	font-size:150%;
	font-weight:600;
	padding:1vw 0 1.5vw;
}
.faq_title p { font-size:150%; line-height:120%; }
.faq_title img { width:4vw; margin-right:5px; }


.faq_select2 {
	margin:2vw auto 8vw;
	width:85%;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:5%;
}
.faq_select2 .box {
	font-size:180%;
	font-weight:600;
	line-height:140%;
	border:#FFF 0.5vw solid;
	border-radius:1.5vw;
	background:#ffd5e2;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.faq_select2 .box h2 { border-bottom:#FFF 0.2vw solid; text-align:center; }
.faq_select2 .box h2 img { position:relative; top:-1.5vw; width:80%; }
.faq_select2 .box p a { display:block; padding:2vw 0; color:#222; text-align:center; border-radius:0 0 1.2vw 1.2vw; }
.faq_select2 .box p a:is(:hover, :focus) { background:var(--pink); color:#FFF; }

.faq_select2 .box .ss {
	display:grid;
	grid-template-columns:1fr 1fr;
}
.faq_select2 .box .ss div a { display:block; color:#222; text-align:center; }
.faq_select2 .box .ss div a:is(:hover, :focus) { background:var(--pink); color:#FFF; }

.faq_select2 .box .ss div:first-child a { padding:3.3vw 0; border-radius:0 0 0 1.2vw; border-right:#FFF 0.2vw solid; }
.faq_select2 .box .ss div:last-child a { padding:2vw 0; border-radius:0 0 1.2vw 0; }



@media screen and (orientation:portrait) {
	.tab { bottom:-4px; }
	.tab ul { display:none; }
	.tab li { border:#f0bbd4 4px solid; border-bottom:none; border-radius:10px 10px 0 0; font-size:100%; margin:0 3px; }
	.tab li a { padding:6px 8px 4px; border-radius:6px 6px 0 0; }
	.tab .action { padding:6px 8px 4px; border-bottom:#FFF 4px solid; }
	.tab select { display:block; width:100%; padding:15px; text-align:center; margin-bottom:20px; }
	
	.faq { border-radius:10px; border:#f0bbd4 4px solid; padding:5%; margin-bottom:50px; }
	.faq_select { margin:30px 0 50px; }
	.faq_select img { width:48%; }
	
	.faq_title { font-size:120%; line-height:120%; padding:20px 0; }
	.faq_title img { width:50px; }
	
	.faq_select2 { margin:30px auto 50px; display:block; width:90%; }
	.faq_select2 .box { border-radius:20px; border:#FFF 5px solid; font-size:115%; margin:30px 0;  }
	.faq_select2 .box h2 { border-bottom:#FFF 2px solid; }
	.faq_select2 .box h2 img { top:-14px; }
	.faq_select2 .box .ss div:first-child a { padding:30px 0; border-radius:0 0 0 20px; border-right:#FFF 2px solid; }
	.faq_select2 .box .ss div:last-child a { padding:13px 0; border-radius:0 0 20px 0; }
	.faq_select2 .box p a { padding:20px 0; }
}



/* milk store
------------------------------------------------------------------------------ */
#milk {
	display:grid;
	grid-template-columns: 20% 80%;
	grid-template-rows:auto;
	width:100%;
}

#milk .class { margin-bottom:5vw; }
#milk .class h2 { width:100%; margin-bottom:0.5vw; }

#milk .kinds a {
	display:block;
	width:100%;
	color:#0d60a2;
	font-size:120%;
	font-weight:600;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	border-bottom:#ccc 2px dotted;
	padding:0.8vw 0;
	text-align:center;
}
#milk .kinds a:is(:hover, :focus) { color:var(--pink); }

#milk .store { width:100%; }
#milk .store a {
	display:inline-block;
	width:29%;
	border:#ccc 1px solid;
	margin:2.5% 0.6%;
}
#milk .store a:is(:hover, :focus) { border:var(--pink) 1px solid; }

#milk .class .record { width:100%; padding:2vw 0 0; }
#milk .class .record a {
	display:block;
	color:#FFF;
	font-size:120%;
	text-align:center;
	font-weight:600;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	background:var(--pink);
	padding:1vw;
	border-radius:5px;
}
#milk .class .record a i { opacity:0.6; }
#milk .class .record a:is(:hover, :focus) { background:#333; }

#milk .class .store_list { width:100%; }
#milk .class .store_list ul { width:100%; }
#milk .class .store_list li a {
	display:block;
	color:#222;
	border-bottom:#ccc 1px dashed;
	padding:0.6vw 0;
}
#milk .class .store_list li a i { color:var(--pink); }
#milk .class .store_list li a:is(:hover, :focus) { background:var(--pink); color:#FFF; }
#milk .class .store_list li a:is(:hover, :focus) i { color:#ffb3d7; }


#milk .store_list_sp { display:none; }


#milk .milk {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
	width:100%;
	
	padding-left:6vw;
	margin-bottom:5vw;
}


#milk .milk div { margin:1vw; text-align:center; }
#milk .milk .photo { aspect-ratio: 1 / 1; border:#ccc 1px solid; }
#milk .milk h3 {
	text-align:center;
	font-weight:600;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	padding:0.6vw 0;
	color:#333;
	font-size:110%;
}
#milk .milk .store_logo img { width:10.5%; margin:1%; }

#milk .milk_search { display:none; }


@media screen and (orientation:portrait) {
	#milk { display:block; }
	#milk .class { display:none; }
	#milk .milk { padding-left:0; margin-bottom:50px; }
	#milk .milk div { margin:5%; }
	#milk .milk h3 { font-size:100%; padding:10px 0; line-height:130%; }
	
	#milk .milk_search { display:block; width:100%; text-align:center; margin-bottom:10px; }
	#milk .milk_search select { padding:10px; font-size:95%; }
	#milk .milk_search a {
		display:block;
		width:95%;
		color:#FFF;
		font-size:120%;
		text-align:center;
		font-weight:600;
		font-family:"cwTeXYen", "Meiryo UI", sans-serif;
		background:var(--pink);
		padding:15px;
		border-radius:5px;
		margin:15px auto 0;
	}
	#milk .milk_search a i { opacity:0.6; }
	#milk .milk_search a:is(:hover, :focus) { background:#333; }
	
	#milk .store_list_sp { display:block; padding-bottom:50px; }
	#milk .store_list_sp h2 { text-align:center; padding-bottom:8px; }
	#milk .store_list_sp h2 img { width:60%; max-width:350px; }
	#milk .store_list_sp li a { display:block; color:#222; border-bottom:#ccc 1px dashed; padding:10px; }
	#milk .store_list_sp li a i { color:var(--pink); }
}

@media screen and (max-width:640px) {
	#milk .milk {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows:auto;
		width:100%;
	}
	#milk .milk h3 { font-size:90%; }
	#milk .milk .store_logo img { width:18%; margin:0 1% 1%; }
}




/* service
------------------------------------------------------------------------------ */
.service { width:100%; text-align:center; }
.service a {
	display:inline-block;
	width:43%;
	max-width:635px;
	margin:3%;
}
.service a:is(:hover, :focus) { opacity:0.6; }

@media screen and (orientation:portrait) {
	.service { padding-top:10px; }
	.service a { width:46%; margin:1%; }
}




/* sitemap
------------------------------------------------------------------------------ */
#sitemap { margin-top:1vw; }
#sitemap .box {
	float:left;
	width:calc(100% / 3);
	padding:1vw;
}

#sitemap .box a { display:block; width:100%; padding:1vw; text-align:center; text-decoration:none; }
#sitemap .box a:is(:hover, :focus) { color:#FFF; background:var(--pink); }

#sitemap .box .c1 { background:var(--blue); color:#FFF; }
#sitemap .box .c2 { background:#FFF; color:#050505; border-top:#ccc 1px dashed; }

@media screen and (max-width:760px) {
	#sitemap { margin-top:30px; }
	#sitemap .box { float:none;	width:100%;	padding:0 10px; margin-bottom:25px; }
	#sitemap .box a { padding:15px; }
}






/* footer
------------------------------------------------------------------------------ */
footer {
	position:relative;
	background:#c84081;
	padding:5vw;
}
footer a:focus {
	box-shadow:0 0 0 2px #FFF;
    outline:2px solid #FFF;
}

.qrcode { float:left; width:20%; }
.qrcode a:is(:hover, :focus) { opacity:0.6; }
.qrcode img { width:5.5vw; }

address { float:left; width:60%; font-size:90%; color:#FFF; line-height:180%; }
address a { color:#FFF; }
address a:is(:hover, :focus) { text-decoration:underline; }
address ul { margin-bottom:0.6vw; }
address li { display:inline-block; border-left:#d18bac 1px solid; padding:0 1vw; }
address li:nth-last-child(1) { border-right:#d18bac 1px solid; }

.mark { float:left; width:20%; text-align:right; }
.mark .gov { width:3vw; }
.mark .aplus { width:10vw; }

@media screen and (orientation:portrait) {
	footer { padding:50px 30px; }
	.qrcode, address, .mark { float:none; width:100%; text-align:center; }
	.qrcode img { width:30%; max-width:200px; margin:5px; }
	address { padding:10px 0; font-size:80%; }
	address ul { margin-bottom:15px; }
	address li { padding:0 15px; }
	.mark { margin-top:15px; }
	.mark .gov { width:50px; }
	.mark .aplus { width:150px; }
}




/* go top
------------------------------------------------------------------------------ */
.bck {
	position:fixed;
	bottom:10px;
	right:0;
	visibility:hidden;
	width:86px;
	height:100px;
	transition-property:all;
	z-index:2;
}

.bck.bck-on {visibility:visible;}
.fade{opacity: 0;}
.bck-on.fade{opacity: 1;}
.rightToLeft {right : -86px;}
.bck-on.rightToLeft{right:0;}
.bottomToTop {bottom: -50px;}
.bck-on.bottomToTop {bottom:1rem;}
.bck-leftToRight {left: -86px;}
.bck-on.leftToRight {left:0;}
.topToBottom {top: -50px;}
.bck-on.topToBottom {top:1rem;}




/* btn
------------------------------------------------------------------------------ */
.btn { width:100%; text-align:center; padding-top:3vw; border-top:#bbb 1px solid; margin-bottom:5vw; }
.btn a {
	display:inline-block;
	font-size:140%;
	font-weight:600;
	font-family:"cwTeXYen", "Meiryo UI", sans-serif;
	color:#FFF;
	border-radius:99em;
	padding:1.2vw 0;
}
.btn a i { opacity:0.6; margin-right:3px; vertical-align:middle; }
.btn a:is(:hover, :focus) { background:#333; }

.btn_1 a { width:25%; }

.btn_p { background:var(--pink); }

@media screen and (orientation:portrait) {
	.btn { padding-top:30px; margin-bottom:50px; }
	.btn a { padding:15px 0; font-size:120%; }
	.btn_1 a { width:50%; }
}
@media screen and (max-width:640px) {
	.btn_1 a { width:80%; }
}




/* color
------------------------------------------------------------------------------ */
:root {
	--red:#992323;
	--green:#246548;
	--pink:#c84081;
	--blue:#0d60a2;
}


/* youtube 比例自動縮放
-------------------------------------------------------------------------- */
.iframe-16x9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-16x9 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}