@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
audio,canvas,iframe,img,svg,video{
vertical-align: middle;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display: block;
}
nav ul{
list-style: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* ------ Font ------ */
@font-face {
font-family: 'icomoon';
src: url('/fonts/icomoon.woff2') format('woff2'),
      url('/fonts/icomoon.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ------ Settings ------ */
html {
scroll-behavior: smooth;
}
body{
position: relative;
margin: 0 auto;
min-width: 360px;
width: 100%;
background-color: #fff;
font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
color: #000a02; /* 墨 */
font-size: 16px;
line-height: 1.8;
text-align: left;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
a{
outline: none;
}
a:link, a:visited{
color: #1a34ec;
}
a:hover, a:active{
color: #ea0032; /* 唐紅 */
}
h1,h2,h3,h4,h5{
font-weight: 700;
}
strong{
font-weight: 700;
color: #cdae42; /* 金色 */
}
b{
font-weight: 700;
}
em{
font-weight: 700;
color: #c20024; /* 深緋 */
font-style: normal;
}
mark{
background: linear-gradient(transparent 58%, #ffff66 98%);
padding: 0.1em 0.2em;
border-radius: 4px;
color: inherit;
}
hr{
margin:0;
}
/* ------ Layout ------ */
.row{
max-width: 1200px;
margin: 0 2%;
}
/* -------------------- ★ Header ★ -------------------- */
header{
width: 100%;
background-color: #222;
}
/* ----- header-top ----- */
#header-top{
position: relative;
background-image: url(/img/seigaiha-policy.webp);
color: #f3f3f2; /* 白練 */
font-size: calc(11px + ((1vw - 3.6px) * 0.98));
}
.header-title{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
header h1{
margin: 1px 0 -0.5px 3px;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
}
header .official-operator{
margin: 1px 3px -0.5px auto;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
}
header h2{
display:none;
}
/* ----- header-nav ----- */
.header-nav{
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.header-logo p{
position: relative;
margin: 10px;
text-align: center;
}
.header-logo a:hover, .header-logo a:active{
filter: saturate(180%);
}
.header-menu{
width: 100%;
}
.main-navi{
position: relative;
width: 100%;
}
.main-navi ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.main-navi li{
width: 20%;
}
.main-navi a{
display: block;
position: relative;
font-size: calc(16px + ((1vw - 3.6px) * 1.71));
height: calc(27px + ((1vw - 3.6px) * 11.4));
padding-top: calc(44px + ((1vw - 3.6px) * 11.4));
text-decoration: none;
color: #f3f3f2; /* 白練 */
text-align: center;
}
.main-navi a::before{
display: block;
position: absolute;
width: 100%;
top: calc(0px + ((1vw - 3.6px) * 5.71));
text-align: center;
font-family: 'icomoon';
font-size: 210%;
}
.main-navi a::after{
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
.main-navi li:nth-child(5), .main-navi li:nth-child(7),.main-navi li:nth-child(8){
display:none;
}
.n1 a:hover, .n1 a:active, .n2 a:hover, .n2 a:active, .n3 a:hover, .n3 a:active, .n4 a:hover, .n4 a:active, .n5 a:hover, .n5 a:active, .n6 a:hover, .n6 a:active, .n7 a:hover, .n7 a:active, .n8 a:hover, .n8 a:active, .n9 a:hover, .n9 a:active{
color: #fff;
filter: saturate(180%);
}
.n1 a:link::after, .n1 a:visited::after, .n2 a:link::after, .n2 a:visited::after, .n3 a:link::after, .n3 a:visited::after, .n4 a:link::after, .n4 a:visited::after, .n5 a:link::after, .n5 a:visited::after, .n6 a:link::after, .n6 a:visited::after, .n7 a:link::after, .n7 a:visited::after, .n8 a:link::after, .n8 a:visited::after,.n9 a:link::after, .n9 a:visited::after{
display: none;
}
.n1 a:link, .n1 a:visited{
background-color: hsl(132 100% 1%); /* 墨 */
background: linear-gradient(to bottom, hsl(132 100% 6%), hsl(132 100% 0%));
}
.n1 a::before{
content: "\e900";
}
.n1 a:hover::after, .n1 a:active::after{
display: block;
border-top: solid 10px hsl(193 100% 0%);
}
.n2 a:link, .n2 a:visited{
background-color: hsl(193 100% 33%); /* 縹 */
background: linear-gradient(to bottom, hsl(193 100% 38%), hsl(193 100% 28%));
}
.n2 a::before{
content: "\e90f";
}
.n2 a:hover::after, .n2 a:active::after{
display: block;
border-top: solid 10px hsl(193 100% 28%);
}
.n3 a:link, .n3 a:visited{
background-color: hsl(145 48% 47%); /* 青/緑 */
background: linear-gradient(to bottom, hsl(145 48% 52%), hsl(145 48% 42%));
}
.n3 a::before{
content: "\e9b2";
}
.n3 a:hover::after, .n3 a:active::after{
display: block;
border-top: solid 10px hsl(145 48% 42%);
}
.n4 a:link, .n4 a:visited{
background-color: hsl(45 93% 52%); /* 藤黄 */
background: linear-gradient(to bottom, hsl(45 93% 57%), hsl(45 93% 47%));
}
.n4 a::before{
content: "\e9a3";
}
.n4 a:hover::after, .n4 a:active::after{
display: block;
border-top: solid 10px hsl(45 93% 47%);
}
.n5 a:link, .n5 a:visited{
background-color: hsl(26 92% 55%); /* 黄丹 */
background: linear-gradient(to bottom, hsl(26 92% 60%), hsl(26 92% 50%));
}
.n5 a::before{
content: "\e932";
}
.n5 a:hover::after, .n5 a:active::after{
display: block;
border-top: solid 10px hsl(26 92% 50%);
}
.n6 a:link, .n6 a:visited{
background-color: hsl(348 100% 38%); /* 深緋 */
background: linear-gradient(to bottom, hsl(348 100% 43%), hsl(348 100% 33%));
}
.n6 a::before{
content: "\e928";
}
.n6 a:hover::after, .n6 a:active::after{
display: block;
border-top: solid 10px hsl(348 100% 33%);
}
.n7 a:link, .n7 a:visited{
background-color: hsl(288 35% 43%); /* 紫 */
background: linear-gradient(to bottom, hsl(288 35% 48%), hsl(288 35% 38%));
}
.n7 a::before{
content: "\e92a";
}
.n7 a:hover::after, .n7 a:active::after{
display: block;
border-top: solid 10px hsl(288 35% 38%);
}
.n8 a:link, .n8 a:visited{
background-color: hsl(232 38% 49%); /* 紺桔梗 */
background: linear-gradient(to bottom, hsl(232 38% 54%), hsl(232 38% 44%));
}
.n8 a::before{
content: "\e953";
}
.n8 a:hover::after, .n8 a:active::after{
display: block;
border-top: solid 10px hsl(232 38% 44%);
}
.n9 a:link, .n9 a:visited{
background-color: hsl(188 100% 37%); /* 浅葱 */
background: linear-gradient(to bottom, hsl(188 100% 42%), hsl(188 100% 32%));
}
.n9 a::before{
content: "\e947";
}
.n9 a:hover::after, .n9 a:active::after{
display: block;
border-top: solid 10px hsl(188 100% 32%);
}
/* ----- mainvisual ----- */
#mainvisual{
display:none;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.breadcrumb-list{
flex: 1;
margin: 10px 0;
font-size: calc(11px + ((1vw - 3.6px) * 0.49));
color: #000a02; /* 墨 */
}
.breadcrumb-list li{
display: inline;
list-style: none;
}
.breadcrumb-list li::after{
margin-left: 3px;
content: ">";
}
.breadcrumb-list li:last-child::after{
content: "";
}
.home-icon::before{
margin-right: 1px;
font-family: 'icomoon';
content: "\e900";
}
.home-label{
display:none;
}
.breadcrumb-list a, .breadcrumb-note a{
color: #000a02; /* 墨 */
text-decoration:none;
}
.breadcrumb-list a:hover, .breadcrumb-list a:active, .breadcrumb-note a:hover, .breadcrumb-note a:active{
text-decoration: underline;
color: #ea0032; /* 唐紅 */
}
.breadcrumb-note{
margin: 10px 3px 10px auto;
font-size: calc(11px + ((1vw - 3.6px) * 0.49));
color: #000a02; /* 墨 */
white-space: nowrap;
}
.breadcrumb-note::before{
content: "※";
}
/* -------------------- ★ Main ★ -------------------- */
.container{
display: flex;
flex-direction: column; /* スマホ時：縦並び */
margin-top: 0;
}
.main-column{
width: 100%;
}
main h1 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
/* -------------------- ★ Policy tips ★ -------------------- */
.policy-tips{
margin: 60px 0;
}
.policy-tips:first-of-type {
margin: 0 0 60px 0;
}
.policy-tips h2 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
.policy-tips h3{
margin: 1.5em 1em 0 1em;
font-size: 24px;
border-bottom: 6px solid #0074ab; /* 藍 */
}
.policy-tips h3::before{
margin-right: 5px;
font-weight: 500;
font-size: 25px;
font-family: 'icomoon';
content: "\e910";
vertical-align:bottom;
}
.policy-tips p{
margin: 1.5em 1.5em 0 1.5em;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
.policy-tips p img{
display: block;
margin: 0 auto;
width: 97%;
height: auto;
aspect-ratio: 800 / 600;
border-radius: 8px;
}
/* ------ banner-box ------ */
.banner{
margin: 60px 0;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
.banner h2 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
.banner p{
margin: 2em 2em 0 2em;
}
.banner h3{
margin-top: 60px;
padding: 5px 0 5px 12px;
font-size: 20px;
color: #f3f3f2; /* 白練 */
background-image: url(/img/seigaiha-policy.webp);
border-radius: 8px 8px 0 0;
}
.banner h3::before{
margin-right: 3px;
font-family: 'icomoon';
content: "\e91a";
}
.banner-box{
padding: 10px 10px;
border-left: solid 2px #eee;
border-right: solid 2px #eee;
border-bottom: solid 2px #eee;
border-radius: 0 0 8px 8px;
}
.banner-box h4{
margin: 20px 0px;
}
.banner-box img{
max-width: 100%;
height: auto;
}
.banner-box p{
margin: 10px 0px 20px 0px;
padding: 6px;
border: 1px #c0c0c0 solid;
height: 5em;
overflow-y: scroll;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{
width: 100%;
margin-top: 60px;
padding: 5px 0 ;
background-color: #222;
border-radius: 8px;
}
.sidebar h2{
margin: 20px 0;
font-size: 23px;
color: #f3f3f2; /* 白練 */
text-align: center;
}
.sidebar h2 img{
width: 100%;
height:auto;
aspect-ratio: 640 / 100;
}
/* ------ banner1 ------ */
.side-banner1{
padding: 30px 0;
min-height: 250px;
text-align: center;
}
/* ------ ranking ------ */
.ranking{
margin: 0 35px 35px 35px;
padding: 20px 5px 20px 25px;
text-align:left;
background-color: #fff;
border-radius: 8px;
}
.ranking p{
font-size: 19px;
}
.ranking p::first-letter{
background-color: #8c867b; /* 利休鼠 */
color: #f3f3f2; /* 白練 */
border-radius: 50%;
padding: 0.2em 0.46em;
margin-right: 0.5em;
text-align: center;
line-height: 2em;
}
.ranking p:first-of-type::first-letter,
.ranking p:nth-of-type(2)::first-letter,
.ranking p:nth-of-type(3)::first-letter {
background-color: #0074ab; /* 藍 */
font-weight: bold;
}
/* ------ banner2 ------ */
.banner-wrapper{
display: grid;
grid-template-columns: 1fr;
justify-content: center;
}
.side-banner2{
padding: 30px 0;
max-width: 300px;
margin: 0 auto;
}
/* -------------------- ★ 検索Btn ★ -------------------- */
#searchBtn{
background-color: hsl(198 100% 32%); /* 藍 */
background: linear-gradient(to bottom, hsl(198 100% 37%), hsl(198 100% 27%));
}
#searchBtn:hover{
background: linear-gradient(to bottom, hsl(198 100% 27%), hsl(198 100% 17%));
}
/* -------------------- ★ Link ★ -------------------- */
.link{
padding: 20px 0x;
text-align: center;
background: hsl(198 100% 32% / 7%); /* 藍 7％ */
}
.link a{
padding: 0 4px 0 8px;
font-size: 12px;
color: #000a02; /* 墨 */
text-decoration: none;
border-left: solid 1px #e3e1eb;
}
.link a:first-child{
padding-left: 0;
border-left: none;
}
.link a:hover, .link a:active{
color: #ea0032; /* 唐紅 */
text-decoration: underline;
}
/* -------------------- ★ Page Top ★ -------------------- */
.page-top{
font-family: "Verdana";
font-weight: 900;
}
.page-top a{
display: block;
padding: 0.2em 0 0.35em 0;
text-align: center;
text-decoration: none;
letter-spacing: 0.3px;
color: #f3f3f2; /* 白練 */
}
.page-top a::before{
font-family: 'icomoon';
content: "\ea25";
margin-right: 0.4em;
}
.page-top a:link, .page-top a:visited{
background-color: hsl(198 100% 32%); /* 藍 */
background: linear-gradient(to bottom, hsl(198 100% 37%), hsl(198 100% 27%));
}
.page-top a:hover, .page-top a:active{
letter-spacing: 0.5px;
color: #f3f3f2; /* 白練 */
background: linear-gradient(to bottom, hsl(198 100% 27%), hsl(198 100% 17%));
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
width: 100%;
margin: 0;
padding-bottom: 20vw;
background-image: url(/img/seigaiha-policy.webp);
color: #f3f3f2; /* 白練 */
text-align: center;
}
footer .row{
position: relative;
}
/* ----- footer link ----- */
footer .link a:link, footer .link a:visited{
color: #f3f3f2; /* 白練 */
}
footer .link a:hover, footer .link a:active{
color: #ea0032; /* 唐紅 */
}
/* ----- logomark ----- */
.logomark{
display:none;
}
footer h2{
display:block;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
font-size: calc(30px + ((1vw - 3.6px) * 3.57));
text-shadow: 3px 3px 3px #595455;
letter-spacing: 2px;
}
footer h2 span{
margin: 0 0.1em;
font-size: 0.55em;
}
footer .official-operator{
display:block;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
font-size: calc(14px + ((1vw - 3.6px) * 0.95));
letter-spacing: 2px;
}
footer .official-operator::before{
content: "- ";
}
footer .official-operator::after{
content: " -";
}
footer p{
font-size: 12px;
}
/* ----- bottom-nav ----- */
.bottom-nav{
position: fixed;
bottom: calc(-0.4em - ((1vw - 3.6px) * 4.9)); /* 全体の下の空間 */
width: 100%;
display: flex;
justify-content: space-around;
background-color: #f3f3f2; /* 白練 */
border-top: 1px solid #f3f3f2; /* 白練 */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.nav-item{
flex: 1;
text-align: center;
text-decoration: none;
font-size: calc(12px + ((1vw - 3.6px) * 1.05));
}
.nav-item span{
display: block;
color: #8c867b; /* 利休鼠 */
transition: color 0.3s; /* 滑らかに変化 */
}
.nav-item .icon-furusato::before, .nav-item .icon-event::before, .nav-item .icon-access::before, .nav-item .icon-life::before{
font-family: 'icomoon';
font-size: calc(8vw);
display: block;
margin: -0.1em auto -0.3em auto; /* アイコンの上と下文字との空間 */
}
.nav-item .icon-furusato::before{
content: "\e928";
}
.nav-item .icon-event::before{
content: "\e953";
}
.nav-item .icon-access::before{
content: "\e947";
}
.nav-item .icon-life::before{
content: "\e918";
}
.nav-item:hover span{
color: #ea0032; /* 唐紅 */
}
/* 中央ロゴ */
.nav-item.middle{
position: relative;
top: -4vw;
}
.nav-item.middle img{
width: calc(19vw);
height: calc(19vw);
}
.nav-item.middle img:hover{
filter: brightness(1.2);
transition: filter 0.3s ease;
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media (min-width: 768px) {
/* -------------------- ★ Header ★ -------------------- */
/* ----- header-top ----- */
#header-top{
font-size: 15px;
}
header h1{
margin: 0 0 -1px 5px;
}
header .official-operator{
margin: 0 5px -1px auto;
}
header h2{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -43%);
font-size: 12px;
font-weight: 500;
}
/* ----- header-nav ----- */
.header-nav{
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.header-logo{
width: 36%;
}
.header-logo img{
width:94%;
max-width:336px;
height:auto;
}
.header-logo p{
margin: 17px 0 0 1%;
text-align: left;
}
.header-menu{
width: 64%;
}
.main-navi{
margin: 2% 0;
}
.main-navi ul{
justify-content: flex-end;
}
.main-navi a{
font-size: calc(18px + ((1vw - 7.68px) * 0.78));
height: calc(35.5px + ((1vw - 7.68px) * 4));
padding-top: calc(63.5px + ((1vw - 7.68px) * 4));
}
.main-navi a::before{
top: 12px;
}
/* ----- mainvisual ----- */
#mainvisual{
display:block;
position: relative;
width: 100%;
max-width: 1200px;
aspect-ratio: 1200 / 470;
margin: 0 auto;
overflow: hidden;
}
#mainvisual img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: circle(0% at 50% 50%);
transition: clip-path 2s ease;
opacity: 0;
}
#mainvisual img.active{
clip-path: circle(150% at 50% 50%);
opacity: 1;
z-index: 1;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb-list, .breadcrumb-note{
font-size: 13px;
}
.home-label{
display:inline;
}
/* -------------------- ★ Sidebar ★ -------------------- */
/* ------ banner2 ------ */
.banner-wrapper{
grid-template-columns: repeat(2, 1fr);
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ Header ★ -------------------- */
/* ----- header-nav ----- */
.header-logo{
width: 30%;
}
.header-logo p{
margin: 4% 0 0 1%;
}
.header-menu{
width: 70%;
}
.main-navi li{
width: 12.5%;
}
.main-navi a{
font-size: calc(15.5px + ((1vw - 10.24px) * 0.97));
height: calc(31px + ((1vw - 10.24px) * 3.98));
padding-top: calc(59px + ((1vw - 10.24px) * 3.98));
}
.main-navi li:nth-child(5), .main-navi li:nth-child(7),.main-navi li:nth-child(8){
display:inline;
}
/* -------------------- ★ Main ★ -------------------- */
.container{
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: calc(30px + ((1vw - 10.24px) * 34.1));
align-items: stretch;
}
.container > .main-column:nth-of-type(1) { /* メイン1 → 左上 */
grid-column: 1;
grid-row: 1;
}
.container > .main-column:nth-of-type(3) { /* メイン2 → 左下 */
grid-column: 1;
grid-row: 2;
}
/* -------------------- ★ Policy tips ★ -------------------- */
.policy-tips{
margin: 90px 0;
}
.policy-tips h3{
margin: 2em 1em 0 1em;
}
.policy-tips p{
margin: 2em 1.5em 0 1.5em;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{ /* サイドバー → 右上 */
grid-column: 2;
grid-row: 1 / span 2; /* 上下にまたがるように */
width: calc(330px + ((1vw - 10.24px) * 22.7));
flex-shrink: 0;
margin-top: 0;
background-color: #222;
border-radius: 8px 8px 0 0;
}
/* ------ banner2 ------ */
.banner-wrapper{
grid-template-columns: 1fr;
}
/* -------------------- ★ Link ★ -------------------- */
.link a{
font-size: 13px;
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
padding-bottom: 3px;
text-align:left;
}
footer .row{
padding: 0 15px;
}
/* ----- logomark ----- */
.logomark{
display: block;
position: absolute;
right: 15px; 
top: 4px;
width: 155px;
height: auto;
z-index: 1;
}
footer h2{
display: inline;
letter-spacing: 0;
}
footer .official-operator{
display: inline;
margin-left: 10px;
letter-spacing: 0;
}
footer p{
margin-left: 2px;
font-size: 14px;
letter-spacing: 0.5px;
}
/* ----- bottom-nav ----- */
.bottom-nav{
display: none;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */
@media (min-width: 1200px) {
/* ------ Layout ------ */
.row{
margin: 0 auto;
}
/* -------------------- ★ Header ★ -------------------- */
/* ----- header-top ----- */
header h1{
margin: 0 0 -1px 0;
}
header .official-operator{
margin: 0 0 -1px auto;
}
/* ----- header-nav ----- */
.main-navi a{
font-size: 17.2px;
height: 38px;
padding-top: 66px;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb-list, .breadcrumb-note{
margin: 10px 0.5px;
}
/* -------------------- ★ Main ★ -------------------- */
.container{
grid-template-columns: minmax(0, 1fr) 370px;
column-gap: 90px;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{
width: auto;
margin-left: 0;
}
/* -------------------- ★ Footer ★ -------------------- */
footer h2{
font-size: 60px;
letter-spacing: 2px;
}
footer .official-operator{
font-size: 22px;
letter-spacing: 2px;
}
.logomark img{
display: block;
width: 100%;
height: auto;
}
}