/*
================================================================================================================
ABOUT
================================================================================================================
*/
#about{
position:relative;
width:100%;
font-family:'M PLUS Rounded 1c', sans-serif;
text-align:center;
padding:0 20px;
margin:0 auto 150px;
transform:rotate(0.05deg);}

#about::before{
display:block;
position:absolute;
content:"";
bottom:0;
left:0;
width:100%;
height:calc(100% - 110px);
color:#eaffff;
background-color:rgba(83,134,148,.4);
box-shadow:0 5px 3px rgba(0,0,0,.4) , 0 10px 15px rgba(0,0,0,.7) , 0 0 10px rgba(0,0,0,.2) , inset 0 1px 0 rgba(255,255,255,.5);}

#about > .box{
display:flex; 
position:relative; 
width:100%;
max-width:1200px;
color:#eaffff;
font-size:21px;
line-height:1.5;
letter-spacing:1.5px;
align-items:center;
padding:20px;
margin:0 auto;}
#about > .box:first-child{padding-bottom:40px;}
#about > .box:last-child{padding-top:40px;}
#about > .box + .box{border-top:2px solid #a3acae;}/*区切り線*/

@media screen and (max-width:980px){
#about{margin:0 auto 100px;}
#about::before{height:93.5%;}
#about > .box{flex-direction:column;}}
@media screen and (max-width:700px){#about::before{height:94.1%;}}
@media screen and (max-width:640px){
#about::before{height:94.6%;}
#about > .box{padding:0;}
#about > .box:first-child{padding-bottom:20px;}
#about > .box:last-child{padding:20px 0;}}
@media screen and (max-width:480px){#about{margin:0 auto 50px;}}
@media screen and (max-width:420px){#about::before{height:94%;}}
@media screen and (max-width:390px){#about::before{height:94.5%;}}

/*
================================================================================================================
ABOUT-内容
================================================================================================================
*/
#about > .box.about > .inner:first-child{width:45%; text-align:left; padding-right:30px;}
#about > .box.about > .inner:last-child{width:55%;}

#about > .box.epass > .inner{width:50%;}
#about > .box.epass > .inner:last-child{padding-left:30px;}

@media screen and (max-width:980px){
#about > .box > .inner{width:100% !important;}
#about > .box.about > .inner:first-child{text-align:center; padding-right:0;}
#about > .box.epass > .inner:last-child{padding-left:0;}}

/*
========================
ロゴ
========================
*/
#about > .box > .inner > .logo{width:100%; max-width:440px; text-align:center; margin:0 auto 20px;}
#about > .box > .inner > .logo > img{max-width:100%; filter:drop-shadow(2px 2px 2px #0cc0c1) drop-shadow(2px 2px 5px #000); padding-bottom:10px;}
@media screen and (max-width:800px){#about > .box > .inner > .logo{width:60%;}}
@media screen and (max-width:480px){#about > .box > .inner > .logo{width:80%; margin:0 auto 10px;}}

/*
========================
テキスト
========================
*/
#about > .box > .inner .text{
font-size:40px; 
text-shadow:0 0 1px #00bcd4 , 0 0 2px #00bcd4 , 0 0 4px #00bcd4 , 0 0 6px #00bcd4 , 0 0 8px #00bcd4 , 0 0 10px #00bcd4 , 0 10px 10px #000;           
margin-bottom:20px;}
@media screen and (max-width:1165px){#about > .box > .inner .text{font-size:30px;}}
@media screen and (max-width:980px){#about > .box > .inner .text{font-size:28px;}}
@media screen and (max-width:480px){#about > .box > .inner .text{font-size:20px;}}
@media screen and (max-width:375px){#about > .box > .inner .text{font-size:16px;}}

@media screen and (max-width:980px){#about{font-size:20px;}}

#about > .box.about > .inner .text{text-align:right;}
#about > .box.epass > .inner .text{text-align:left;}
@media screen and (max-width:980px){#about > .box.epass > .inner .text{text-align:center;}}

#about > .box > .inner .text_detail{font-size:22px; line-height:1.5;}
#about > .box.epass > .inner .text_detail{
width:100%;
background-color:rgba(0,30,38,0.5); 
border-radius:60px; 
text-align:center; 
padding:10px 0;
margin:0 auto;}
@media screen and (max-width:980px){#about > .box.epass > .inner .text_detail{max-width:400px;}}
@media screen and (max-width:800px){#about > .box > .inner .text_detail{font-size:18px;}}
@media screen and (max-width:640px){#about > .box > .inner .text_detail{font-size:15px;}}
@media screen and (max-width:480px){
#about > .box > .inner .text_detail{font-size:13px;}
#about > .box.about > .inner .text_detail{text-align:left;}}

/*
========================
設置店舗検索
========================
*/
.inner > .search{display:flex; justify-content:flex-end; margin:20px auto 0;}
.inner > .search > a{
display:flex;
width:100%;
max-width:210px;
color:#eaffff;
font-size:22px; 
letter-spacing:2px; 
text-decoration:underline;
text-align:right;
align-items:center; 
transition:color .2s ease;}
.inner > .search > a:hover{color:#cdff7e;}

.inner > .search > a > img{
width:56px;
height:56px;
background:radial-gradient(#001e26 50%, #183d41 70%);
border-radius:50%;
border:solid 1px #b1b4b7;
margin-left:5px;
transition:all .2s ease;}
.inner > .search > a:hover > img{background:radial-gradient(#001e26 50%, #205257 70%); border:solid 1px #c6c9cc;}

@media screen and (max-width:980px){
.inner > .search{justify-content:center;}
.inner > .search a{font-size:18px; max-width:185px;}}
@media screen and (max-width:640px){
.inner > .search a{max-width:170px;}
.inner > .search > a > img{width:40px; height:40px;}}

/*
========================
リンク
========================
*/
.inner > a{
display:block; 
color:#ffd07e; 
font-size:36px; 
text-align:center;
text-shadow:0 0 1px #fda204 , 0 0 4px #ffd07e;
margin:40px auto 0;
transition:all .2s ease;}
.inner > a:hover{color:#ffdea4; text-shadow:0 0 8px #fda204 , 0 0 1px #ffd07e , 0 0 4px #ffd07e;}

@media screen and (max-width:1165px){.inner > a{font-size:34px;}}
@media screen and (max-width:680px){.inner > a{font-size:26px;}}
@media screen and (max-width:460px){.inner > a{font-size:20px; margin:20px auto 0;}}

/*
========================
筐体画像/スマホ画像
========================
*/
#about > .box  > .inner > .imgbox{width:100%; text-align:center;}
#about > .box  > .inner > .imgbox > img{width:100%;}
#about > .box.about  > .inner > .imgbox > img{max-width:666px; filter:drop-shadow(10px 10px 10px #000);}
#about > .box.epass  > .inner > .imgbox > img{max-width:463px;}

@media screen and (max-width:980px){
#about > .box.about  > .inner > .imgbox{margin:40px auto 0;}
#about > .box.epass  > .inner > .imgbox{margin:0 auto 20px;}}
@media screen and (max-width:640px){
#about > .box  > .inner > .imgbox{width:80%;}}

/*改行指定*/
@media screen and (min-width:981px){.pc_br{display:block;}}
@media screen and (max-width:980px){.pc_br{display:none;}}