@import "animenu_style.css"; @import "animate.css"; @import "font-awesome.min.css"; @import "contents.css"; @font-face{ font-family: 'utsukushifont'; src: url('font/UtsukushiFONT.eot'); /* IE9以上用 */ src: url('font/UtsukushiFONT.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ url('font/UtsukushiFONT.woff') format('woff'), /* モダンブラウザ用 */ url('font/utsukushifont.ttf') format('truetype'); /* iOS, Android用 */ url('font/UtsukushiFONT.otf') format('opentype'); font-weight: normal; /* 念の為指定しておきます */ font-style: normal; } @font-face{ font-family: 'cinecaption'; src: url('font/cinecaption.eot'); /* IE9以上用 */ src: url('font/cinecaption.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ url('font/cinecaption.woff') format('woff'), /* モダンブラウザ用 */ url('font/cinecaption2.28.ttf') format('truetype'); url('cinecaption.svg#cinecaption') format('svg'); font-weight: normal; /* 念の為指定しておきます */ font-style: normal; } @font-face { font-family: 'copy'; src: url('font/copy.eot?16121234'); src: url('font/copy.eot?16121234#iefix') format('embedded-opentype'), url('font/copy.woff?16121234') format('woff'), url('font/copy.ttf?16121234') format('truetype'), url('font/copy.svg?16121234#copy') format('svg'); font-weight: normal; font-style: normal; } /*======================================================== Main layout styles ========================================================*/ body { font-family: 'utsukushifont'; font-size: 13px; letter-spacing: 0.08em; line-height: 160%; margin: 0 auto; padding: 0; color: #8A642C; background: url("../images/bg.jpg") #1c120f; background-size: cover; } html, body{ width: 100%; height: 100%; } a[href^="tel:"] { color: inherit; text-decoration: none; } img { max-width: 100%; } * { -webkit-text-size-adjust: none; } img { border: 0 none; vertical-align: text-bottom; } a:link { color: #fff; text-decoration:none; } a:visited { color:#fff; text-decoration:none; } a:hover { color: #fff; text-decoration:underline; } /* ================================================= ヘッダー ================================================= */ #header { z-index: 500; top: 0; left: 0; right: 0; } #header { font-family: 'utsukushifont'; color: #8A642C; z-index: 100; margin: 0 auto; padding: 0; position: fixed; width: 100%; top: 0; height:135px; clear:both; background: url("../images/bg01_2.png") #1c120f; background-size: cover; } .header_box { height: 120px; margin: 0 auto; position: relative; text-align: left; width: 1050px; } .logo { clear: both; float: left; height: 120px; left: 0; position: relative; top: 0; width: 253px; } .logo h1 { color: #ae9b87 !important; float: left; font-size: 15px !important; font-weight: normal; height: 27px; padding-top: 12px; text-align: left; width: 410px; margin-bottom:10px; } .header_sitemap { color: #ae9b87; position: absolute; float: right; font-size: 15px; height: 27px; padding-top: 12px; width: 380px; right: 0; top: 0; text-align:center; } .header_sitemap a:link { color: #8A642C; text-decoration: none; } .header_sitemap a:hover { color: #D0AF88; text-decoration: underline; } /*900px*/ @media screen and (max-width: 900px) { #header { height:135px; position: absolute; } .header_box { height: 0; margin: 0 auto; position: relative; text-align: left; width: 100% !important; } .header_box p { margin: 0 auto; position: relative; text-align: center; } .logo { clear: both; float: none; left: 0; position: relative; top: 0; width: 100%; } .logo > img { float: right; } .logo h1 { color: #ae9b87 !important; float: none; font-size: 10px !important; margin-left: -30px; padding: 1em 0 0 0.8em; text-align: left; width: 50% !important; } .header_sitemap { color: #ae9b87; float: none; font-size: 10px; height: 27px; padding-top: 12px; position: absolute; right: 10px; text-align: right; width: 50%; } } /* iPadサイズ(縦用) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #header { height:30%; position: absolute; } .header_box { height: 0; margin: 0 auto; position: relative; text-align: left; width: 100% !important; } .logo { clear: both; float: none; left: 5%; position: relative; top: 0; width: 90%; } .logo > img { float: right; } .logo h1 { color: #ae9b87 !important; float: none; font-size: 10px !important; padding: 1em 0 0 0.8em; text-align: left; width: auto !important; width: 290px; } .header_sitemap { color: #ae9b87; position: absolute; float: none; font-size: 10px; height: 27px; padding-top: 12px; width: 110px; right: 0; text-align:center; } } /*480px*/ @media screen and (max-width: 480px) { #header { height:30%; position: absolute; } .header_box { height: 0; margin: 0 auto; position: relative; text-align: left; width: 100% !important; } .logo { clear: both; float: none; left: 0; position: relative; top: 0; width: 100%; } .logo h1 { color: #ae9b87 !important; float: none; font-size: 10px !important; padding: 0.5em 0 0 0.8em; text-align: center; width: 100% !important; margin-bottom: 22px; margin-left: 0; } .header_sitemap { color: #ae9b87; position: absolute; float: none; font-size: 22px; padding-top: 5px; text-align:center; width:100%; margin-top: 25px; right: 0; } } /*スマートフォン */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px), only screen and (min-width: 320px) and (max-width: 480px) { #header { height:20.5%; position: absolute; } .header_box { height: 0; margin: 0 auto; position: relative; text-align: left; width: 100% !important; } .logo { clear: both; float: none; left: 0; position: relative; top: 0; width: 100%; } .logo h1 { color: #ae9b87 !important; float: none; font-size: 12px !important; padding: 0.5em 0 0 0.8em; text-align: center; width: 100% !important; margin-bottom: 22px; margin-left: 0; } .header_sitemap { color: #ae9b87; position: absolute; float: none; font-size: 27px; padding-top: 5px; text-align:center; width:100%; margin-top: 25px; right: 0; } } /* ======= Headers ======= */ h2 { font: 900 36px/36px 'utsukushifont'; color: #424242; position: relative; padding-bottom: 18px; } h3 { font: 900 20px/20px 'utsukushifont'; color:#FFF; } h4 { font: 900 43px/43px 'utsukushifont'; color: #8A642C; } .heading1 { margin-top: 40px; display: block; text-align: center; margin-bottom: 83px; } .heading1 h2, .heading4 h2 { margin-bottom: 21px; font: 32px/32px 'utsukushifont'; color: #fff; position: relative; padding-bottom: 18px; } .heading2 { margin-top: 40px; display: block; margin-bottom: 83px; } .heading2 h2 { margin-bottom: 21px; font: 700 30px/36px 'utsukushifont'; color: #8A642C; position: relative; padding-bottom: 18px; } .heading3 { margin-top: 40px; display: block; text-align: center; } .heading4 { margin-top: 40px; display: block; text-align: center; } .secondary, .secondary2 { font: 18px/25px 'utsukushifont'; color: #fff; display: block; } .secondary3 { font: 18px/25px 'utsukushifont'; color: #fff; display: block; text-align:left; } .heading1.heading1__inset1 h2 { color: #fff; } .heading1.heading1__inset2 h2 { color: #ffffff; } .heading1.heading1__inset2 span { color: #ffffff; } .heading1.heading1__inset3 h2 { color: #fff; } .heading1.heading1__offset1 { margin-bottom: 51px; } .heading1.heading1__offset2 { margin-bottom: 73px; } .heading1.heading1__offset3 { margin-bottom: 57px; } .bg_co { line-height: 25px; } .bg_co2 { line-height: 25px; text-align:left; } /**************************************************** /*   ***************************************************** */ h2.txt_c { margin-top: 40px; text-align:center; } .con_bri { background: url("../concept/images/bg_bri.jpg") no-repeat scroll center center rgba(0, 0, 0, 0); height: 380px; } .con_bri ul { clear: both; margin: 0 auto; overflow: hidden; padding: 102px 0 0; width: 718px; } .con_bri ul li { float: left; margin: 0 83px 0 0; } .con_bri ul li.ena { float: left; margin: 0 -83px 0 0; } .con_main { } .con_con { border-top: 1px solid #594943; margin-top: 30px; } .con_con .con_top { clear: both; margin: 0 auto; overflow: hidden; width: 990px; } .con_con .con_top .c_con .con_box { border: 1px solid #594943; overflow: hidden; padding: 47px 40px; } /**************************************************** /*  Buttons ***************************************************** */ .btn-big { display: block; width: 100%; text-align: center; font: 300 29px/29px 'utsukushifont'; color: #ffffff; border: 2px solid #ffffff; padding: 15px 10px 17px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btn-big:hover { background: #ec8916; border-color: #ec8916; color: #ffffff; } .btn-big.btn-big__offset1 { margin-top: 62px; } /**************************************************** /*  Wrappers ***************************************************** */ .triangle-wrapper { position: relative; z-index: 20; } .triangle-wrapper.triangle-wrapper__inset1 { background: url("../images/bg01_2.png") #1c120f; background-size: cover; } .triangle-wrapper.triangle-wrapper__inset1:before { background-image: url(../images/triangle2.png); } .triangle-wrapper.triangle-wrapper__inset1:after { display: none; } .border-wrapper1 { border-bottom: 1px solid #8A642C; } .wrapper1 { padding-top: 13px; } .wrapper2 { padding-top: 38px; } .wrapper3 { padding-top: 22px; } .wrapper4 { padding-top: 10%; padding-bottom: 72px; } /* ======= Logo ======= */ h1 { float: left; } h1 a { display: block; padding: 34px 38px 30px 27px; background: #8A642C; } @media (max-width: 1330px) { h1 a { padding: 34px 9px 30px 6px; } } @media (max-width: 767px) { h1 a { padding-top: 6px; padding-bottom: 5px; } } h1 a:hover { color: #292929; } h1 span { font: 400 40px/31px 'utsukushifont';; color: #292929; display: inline-block; padding-left: 58px; position: relative; } h1 span:before { position: absolute; content: ''; left: 0; top: -14px; width: 42px; height: 53px; overflow: hidden; background: url(../images/logo.png) no-repeat center 0; } @media (max-width: 979px) { h1 span { font-size: 23px; padding-left: 30px; } h1 span:before { width: 21px; height: 26px; top: 1px; background-size: contain; } } @media (max-width: 767px) { h1 { width: 50%; text-align: center; } .wrapper4 { margin-top: 150px; padding-top: 0; } } @media (max-width: 479px) { h1 { width: 43%; } h1 span { font-size: 18px; } .wrapper4 { margin-top: 150px; padding-top: 0; } } /*568px*/ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { .wrapper4 { margin-top: 150px; padding-top: 0; } } /* ======= Main menu variables ======= */ /* ======= Sub menus common variables ======= */ /* ======= First level sub menu variables ======= */ nav { float: right; margin-right: 55px; } @media (max-width: 1600px) { nav { margin-right: 12px; } } /*Core variables and mixins*/ /*======================================================== CONTENT styles =========================================================*/ #content { overflow: hidden; background: #1c120f; margin-top:120px; background: url("../images/bg.jpg") #1c120f; background-size: contain; } /*768px*/ @media screen and (max-width: 768px) { #content { margin-top:180px; } } /*480px*/ @media screen and (max-width: 480px) { #content { margin-top:180px; } } /*320px*/ @media screen and (max-width: 320px) { #content { margin-top:180px; } } /* ======= Box 1 Welcome to ! ======= */ .box1 { text-align: center; margin-bottom: 93px; height:300px; position:relative; } .box1 h3{ font-size:18px; height: 18px; margin-bottom: 18px; word-wrap: break-word; } .box1 p { color: #fff; line-height: 20px; margin: 0 20px 20px; width: 170px; font-size:11px; } .box1.first h3 a:hover , .box1.second h3 a:hover , .box1.third h3 a:hover , .box1.four h3 a:hover , .box1.five h3 a:hover { color: #cc9933; } .box1 img { margin-bottom: 32px; } .box1 img:after { /* この要素が内向きのシャドウを写真に落とす */ position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), inset 0 0 100px rgba(0, 0, 0, 0.2); } .box1 h3 { margin-bottom: 15px; height: 2px; word-wrap: break-word; } @media (max-width: 979px) { .box1 { width: 100%; } .box1 h3{ height: 15px; } .box1.second_1 { position : absolute; z-index : 5; top : 110px; left : 140px; padding : 10px; font-size : 38pt; color:#fff; } } @media (max-width: 767px) { .home .hashAncor { margin-top: -42px !important; height: 42px !important; } .box1 { width: 100%; } .box1 h3{ height: 0; } .box1 p { width: 90% !important; } } /* ======= Box 2 Our beers ======= */ .box2 { margin-top: 6px; text-align: center; margin-bottom: 105px; } .box2 .content { background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 37px 5px 23px; } .box2 .content img { border-radius: 500px; margin-bottom: 20px; } .box2 .content h4 { color: #8A642C; font-size:43px; font-weight:900; } .box2 .content h4 a:link { color: #8A642C; } .box2 .content h4 a:hover { color: #D0AF88; } .box2 .button { display: block; width: 100%; background: #8A642C; font: 300 29px/29px 'utsukushifont'; color: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 17px 10px 19px; } .box2 .button:hover { background: #D0AF88; color: #ffffff; } /* ======= Box 3 Gallery ======= */ .box3, .box10 { margin-bottom: 30px; -webkit-box-shadow: 0px 21px 21px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 21px 21px 0px rgba(0, 0, 0, 0.4); } .box8 { -webkit-box-shadow: 0px 21px 21px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 21px 21px 0px rgba(0, 0, 0, 0.4); } /* ======= Box 4 Our services ======= */ .box4 { text-align: center; margin-bottom: 72px; } .box4 .label { display: inline-block; width: 170px; height: 170px; background: #ffffff; border-radius: 500px; text-align: center; margin-bottom: 30px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .box4 .label i { color: #ec8916; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; line-height: 170px; } .box4 .label i.fa-users { font-size: 72px; } .box4 .label i.fa-thumbs-o-up { font-size: 90px; } .box4 .label i.fa-comments { font-size: 80px; } .box4 h3 { margin-bottom: 12px; } .box4 h3 a:hover { color: #8A642C; } .box4:hover .label { background: #8A642C; } .box4:hover .label i { color: #1c120f; } /* ======= Graph wrapper ======= */ .graph-wrapper { padding-top: 87px; padding-bottom: 79px; } /* ======= Graph ======= */ .graph { margin-bottom: 10px; } .graph .wrapper { overflow: hidden; width: 100%; height: 40px; font: 700 16px/28px 'utsukushifont'; color: #ffffff; } .graph .wrapper_1 { overflow: hidden; background: #d9d3c3; width: 100%; height: auto; font: 700 15px/21px 'utsukushifont'; color: #ffffff; } @media (max-width: 479px) { .graph .wrapper { font-size: 15px; height: auto; } } .graph .wrapper .bar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 7px 0 7px 10px; width: 100%; height: 100%; position: relative; } .graph .wrapper_1 .bar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 24px; padding: 16px 24px; width: 100%; height: 100%; background: #8A642C; position: relative; } .graph .wrapper .bar .percents { position: absolute; display: block; top: 0; right: 0; width: 53px; text-align: center; background: #363a3f; } /* ======= Box 5 FAQ ======= */ .box5 { margin-bottom: 70px; } .box5 .heading { display: block; } .box5 .simple-link { margin-top: 24px; } /* ======= Simple link ======= */ .simple-link { display: inline-block; color: #8A642C; } /* ======= Gallery ======= */ .gallery_image a { display: block; position: relative; } .gallery_image a img { width: 100%; margin-bottom: 0; } .gallery_image a .description { bottom: 0; left: 0; width: 100%; position: absolute; font: 400 12px/17px 'utsukushifont'; color: #ffffff; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 0px; background: url(../images/background2.png) repeat; overflow: hidden; -webkit-transition: height 0.5s ease; transition: height 0.5s ease; } .gallery_image a .description .info { padding: 0 55px; display: block; position: absolute; top: 17%; margin-top: -25px; left: 0; right: 0; text-shadow: 3px 4px 1px #000000; } @media (max-width: 1199px) { .gallery_image a .description .info { padding: 0 5px; } } @media (max-width: 979px) { .gallery_image a .description .info { padding: 0 5px; margin-top: -34px; } } @media (max-width: 767px) { .gallery_image a .description .info { margin-top: -17px; } } @media (max-width: 479px) { .gallery_image a .description .info { margin-top: -25px; } } .gallery_image a:hover .description { height: 250px; } .relative-wrapper { position: relative; } /*====================================================== FOOTER styles ======================================================*/ #footer { overflow: hidden; text-align: center; } #footer .socials1 { float: left; width: 255px; margin-left: 70px; } /*480px*/ @media screen and (max-width: 480px) { #footer .socials1 { margin-left: 0; width: 100%; } } /*320px*/ @media screen and (max-width: 320px) { #footer .socials1 { margin-left: 0; width: 100%; } } .privacy-block span.copy { width:1em; content:"co"; font-size:20px; text-indent:100%; white-space:nowrap; overflow:hidden; } #footer .privacy-block { margin-top: 20px; font: 400 11px/18px 'utsukushifont'; color: #8a642c; width:100%; background: #1c120f; } #footer .privacy-block a:hover { color: #8A642C; } #footer .privacy-block .name { } .telArea { /* float: left;*/ width: 310px; } .leftArea { float: left; margin-right: 90px; margin-top: 30px; width: 310px; } .telArea p { font-size:11px; font-weight:bold; text-align:center; } .footerList { float: left; margin: 0 20px 0 40px; } .footerList li { display: block; float: left; padding-left: 6px; } .footerList li a { color: #FFF; } span.footer_ti { display:block; width:140px; height: 14px; } span.footer_ti02 { display:block; width:140px; font-size:10px; } /*900px*/ @media screen and (max-width: 900px) { .footerList { float: left; margin: 20px 0; padding-left: 20px; } .leftArea { float: left; margin-right: 0; margin-top: 30px; padding: 0 0 0 85px; width: 100%; } .telArea { width: 50%; } .socials1 li { display: block; margin-bottom: 0; margin-left: 0; } #footer .socials1 { float: left; margin-left: 70px; } .socials1 li { margin-bottom: 0; margin-left: 0; } .socials1 li + li { margin-left: 0; } } /*768px*/ @media screen and (max-width: 768px) { .leftArea { float: left; margin-right: 0; margin-top: 30px; padding: 0; text-align: center; width: 100%; } .telArea { float: left; margin: 10px 0 0 30px; width: 60%; } .footerList { float: left; padding-left: 80px; margin: 20px 0; } } /*480px*/ @media screen and (max-width: 480px) { .leftArea { float: left; margin-top: 10px; margin-right: 0 !important; width: 100% !important; } .telArea { margin-left: 10px; width: 95% !important; } .footerList { margin: 0 20px 20px 80px; padding-left: 0; } #footer .socials1 { float: left; margin-left: 0; width: 100%; } } /* ======= Social buttons 1 ======= */ .socials1 li { display: inline-block; margin-bottom: 10px; margin-left: -70px; } .socials1 li + li { margin-left: 20px; } .socials1 li + li.shop { margin-left: 0px; } .socials1 li a i { color: #ffffff; background: #8a642c; text-align: center; font-size: 33px; display: block; width: 50px; height: 50px; line-height: 52px; border-radius: 200px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .socials1 li a i:hover { background: #8A642C; color: #353535; } .socials1 li a i.fa_1 { color: #ffffff; background: #3B5997; text-align: center; font-size: 33px; display: block; width: 50px; height: 50px; line-height: 52px; border-radius: 200px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .socials1 li a i.fa_1:hover { background: #3B5997; color: #353535; } .socials1 li span.so_01{ color: #ffffff; text-align: center; display: block; margin-left: -15px; } .socials1 li span.so_02 { color: #ffffff; text-align: center; display: block; } @media (min-width: 768px) and (max-width: 979px) { .socials1 li { display: block; margin-bottom: 10px; margin-left: -55px; } } @media (max-width: 479px) { .socials1 { text-align: center; } .socials1 li { display: block; margin-bottom: 10px; margin-left: 0; } .socials1 li i { margin: 0 auto; } .socials1 li + li { margin-left: 0; } } /*======================================================== Widget styles =========================================================*/ /* UItoTop styles ========================================================*/ #toTop { display: none; text-decoration: none; position: fixed; bottom: 80px; right: 30px; overflow: hidden; border: none; color: #6f7274; font-size: 37px; line-height: 38px; z-index: 20; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } #toTop:hover { outline: none; color: #8A642C; } @media only screen and (max-width: 1199px) { #toTop { display: none !important; } } /*Core variables and mixins*/ /************************************* ■ページ上スクロール *************************************/ .pagetop { display: none; } /* スマホ用スクロール */ /*900px*/ @media screen and (max-width: 900px) { .pagetop { display: inline-block; text-align: right; margin: 0 auto; } .pagetop a { display: inline-block; color: #fff; font-size: 1.2em; padding: 6px 2em 4px; border-radius: 4px 4px 0 0; background: #090404; } } /************************************* ■loading *************************************/ .loadingWrap{ width: 100%; height: 100%; background: #CCD0D4; position: fixed; top: 0; left: 0; z-index:5000; } .loadingWrap .loader{ position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -230px; } .loader { text-align: center; font-family: 'Nunito', sans-serif; font-size: 4.6875em; color: transparent; letter-spacing: 0.01em; } .loader span { text-shadow: 0 0 2px rgba(204, 208, 212,0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45); animation: loading 0.85s ease-in-out infinite alternate; } @keyframes loading { to {text-shadow: 0 0 2px rgba(204, 208, 212,0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);} } .loader span:nth-child(2) { animation-delay:0.15s; } .loader span:nth-child(3) { animation-delay:0.30s; } .loader span:nth-child(4) { animation-delay:0.45s; } .loader span:nth-child(5) { animation-delay:0.60s; } .loader span:nth-child(6) { animation-delay:0.75s; } .loader span:nth-child(7) { animation-delay:0.90s; } /*480px*/ @media screen and (max-width: 480px) { .loadingWrap .loader{ margin-top: -50px; margin-left: -150px; } .loader { font-size: 3em; } } /*320px*/ @media screen and (max-width: 320px) { .loadingWrap .loader{ margin-top: -50px; margin-left: -150px; } .loader { font-size: 3em; color: transparent; } } /************************************* ■clearfix *************************************/ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } .clearfix { display: block; zoom: 1; } /******************** /* youtube ********************/ .moviewindow{ text-align: center; } .youtube_sp{ display:none; } /*480px*/ @media screen and (max-width: 480px) { .youtube_sp{ display:block; margin-bottom: 10px; } .youtube_pc{ display:none; }