/* ************************************************************************************************ normalize.css ************************************************************************************************ */ img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,figure{margin:0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C""\201D""\2018""\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* ************************************************************************************************ Base ************************************************************************************************ */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* remember: box-sizing is not supported by IE7 :( */ outline: none; vertical-align: top; } html { width: 100%; } html, body { font: normal 1em/2em "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, sans-serif; margin: 0; padding: 0; width: 100%; color: #111; background: #fefefe; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;font-weight:400} p { margin: 0; padding: 0; font-weight: normal; } a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a:focus { outline: none; } *::-moz-selection { background: #111; color:#fefefe; } *::selection { background: #111; color: #fefefe; } h1,h2,h3,h4,h5 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----- .cf ----- */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom: 1; } /* ----- .transition03 ----- */ .transition03 { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .transition05 { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* ----- img ----- */ img { width:100%; max-width:100%; } /* ----- p ----- */ p { color:#111; font-size: 15px; letter-spacing: 1px; line-height: 2; font-weight:normal; } p a { border-bottom: #a276c9 1px dashed; } p a:hover { color: #fefefe; background: #a276c9; border-bottom: #a276c9 1px solid; } @media screen and (max-width: 768px) { p { font-size: 14px;} } @media screen and (max-width: 738px) { p { font-size: 13px; line-height:1.9; } } a{-webkit-tap-highlight-color:rgba(0,0,0,0);} html, body, #page { width:100%; height:100%; } body {overflow:hidden;} #page { padding-left:120px; } @media screen and (max-width: 768px) { #page { padding:0; } } /* ----------------------------------------------------------- #preloader ----------------------------------------------------------- */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0;z-index: 99997; /*background-color: #967ae1; */ -webkit-animation: bgcolor 3s 1; -moz-animation: bgcolor 3s 1; -o-animation: bgcolor 3s 1; animation: bgcolor 3s 1;} #preloader:before { position:absolute; top:0; left:0; bottom:0; right:0; content:""; background: url("../images/pattern_movie.png") repeat; z-index:2; -webkit-animation: bg-pattern 4s 1; -moz-animation: bg-pattern 4s 1; -o-animation: bg-pattern 4s 1; animation: bg-pattern 4s 1;} #preloader:after { position:absolute; left:0; bottom:0; height:5px; content:""; background: #967ae1; z-index:3; -webkit-animation: bg-width 2s 1; -moz-animation: bg-width 2s 1; -o-animation: bg-width 2s 1; animation: bg-width 2s 1;} /* .spinner */ #preloader .spinner { position:absolute; top:0; left:0; right:0; bottom:0; display:block; margin:auto; width:90px; height:88px; background:url("../images/logoCPB_1.png") center center no-repeat; z-index:5; } #preloader .spinner:before {position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; z-index:3; content:""; border-top:1px solid #fefefe;border-right:1px solid #62137e; border-bottom:1px solid #fefefe; border-left:1px solid #10a35a; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin-right 3s linear infinite;-moz-animation:spin-right 3s linear infinite;-ms-animation:spin-right 3s linear infinite;-o-animation:spin-right 3s linear infinite;animation:spin-right 3s linear infinite} #preloader .spinner:after {position:absolute; top:-20px; right:-20px; bottom:-20px; left:-20px; z-index:3; content:""; border-top:1px solid #fefefe;border-right:1px solid #10a35a; border-bottom:1px solid #fefefe; border-left:1px solid #62137e; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin-left 3s linear infinite;-moz-animation:spin-left 3s linear infinite;-ms-animation:spin-left 3s linear infinite;-o-animation:spin-left 3s linear infinite;animation:spin-left 3s linear infinite} @media screen and (max-width: 768px) { #preloader:before { background-size:250px 250px;} #preloader .spinner { width:50px; height:50px; background:url("../images/logoCPB_C.png") center center no-repeat; background-size:50px 50px; } } /* ----------------------------------------------------------- #header ----------------------------------------------------------- */ #header { position:fixed; top:0; left:0; width:120px; height:100%; background:#fbcfe3; z-index: 1201; overflow:hidden;} @media screen and (max-width: 768px) { #header { display:none; } } /* --- .logoArea --- */ #header .logoArea { width:120px; height: 120px; display:block; text-align:center; position:relative; overflow:hidden;text-indent:-999px;} #header .logoArea h1 a { width:120px; height: 120px; background: url("../images/logoCPB_1.png") center center no-repeat #411f70; display: block; overflow: hidden; position: relative; text-indent:-999px; z-index:1003; } /* --- ul.nav --- */ #header ul.nav { list-style:none; margin:0; padding:5px 0 20px; text-align:center; background:#fefefe;} #header ul.nav li { display:block;height:auto; margin:0 5px 0; position:relative; } #header ul.nav li a { display:block; padding:15px 0; line-height:1; color:#541b86; position:relative; z-index:1; } #header ul.nav li .en { text-transform:uppercase; font-size:11px; font-family: 'Josefin Sans', sans-serif; font-weight:700;letter-spacing:2px;} #header ul.nav li .jp {font-size:12px; letter-spacing:1px; margin-top:5px; } #header ul.nav li a i { font-size:10px; vertical-align:0; padding:0 2px; } #header ul.nav li a:after { position:absolute; bottom:0; left:49%; right:49%; height:2px; content:""; background:#d0aafa; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} #header ul.nav li a:hover:after { position:absolute; bottom:0; left:15px; right:15px; height:2px; content:""; background:#e803a4; } #header ul.nav li a:hover { color:#e803a4; } /* --- .snsArea --- */ #header .snsArea { padding-top:15px; } #header .snsArea h3 { color:#e803a4; font-size:12px; font-family: 'Josefin Sans', sans-serif; font-weight:600;letter-spacing:1px; text-align:center; } #header .snsArea ul { list-style:none; } /* --- .snsBtnArea --- */ #header ul.snsBtnArea { margin:0 auto; text-align:center; } #header ul.snsBtnArea li { display:block; font-size: 10px; font-weight: normal; font-style: normal; letter-spacing: 1px; margin: 5px auto 0;} #header ul.snsBtnArea li a { display:block; margin:0 auto; padding: 0 0 0 7px; width:100px; max-width: 100%; color:#fefefe; height:35px; line-height:35px; position:relative; -webkit-border-radius: 35px;-moz-border-radius: 35px;border-radius: 35px; } #header ul.snsBtnArea li a:before { position: absolute; top: 0; left: 10px; bottom: 0; display: block; font-size: 13px; font-family: 'themify'; font-weight: normal; line-height: 35px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header ul.snsBtnArea li a.twitterBtn { background: #2ca7e0; } #header ul.snsBtnArea li a.twitterBtn:before { content: "\e74b"; } #header ul.snsBtnArea li a.facebookBtn { background: #3c599f; } #header ul.snsBtnArea li a.facebookBtn:before { content: "\e741"; } #header ul.snsBtnArea li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #header ul.snsBtnArea li a:hover:before {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);} /* ----------------------------------------------------------- #headerSp ----------------------------------------------------------- */ .slicknav_menu, #headerSp, .logoAreaSp, .titleAreaSp { display: none; } @media screen and (max-width: 768px) { #headerSp { display: block; position: fixed !important; top:0; left:0; width:100%; height:60px; background:rgba(255,255,255,0.9); background:#fefefe; z-index:1500; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; } .logoAreaSp { position:fixed; top:0; left:0; width:60px; height:60px; z-index:9999; display:block; overflow:hidden;text-indent:-999px; font-size:0;} .logoAreaSp h1.logo a { width:60px; height: 60px; background: url("../images/logoCPB_C.png") center center no-repeat #411f70; background-size:50px 50px; display: block; overflow: hidden; position: relative; text-indent:-999px; z-index:1003; } .titleAreaSp { position:fixed; top:0; left:0; right:0; margin:0 auto; width:185px; height:60px; z-index:9999; display:block;overflow:hidden;text-indent:-999px;font-size:0;} .titleAreaSp h1.title a { width:185px; height: 60px; background: url("../images/logoSp.png") center center no-repeat; background-size:185px 60px; display: block; overflow: hidden; position: relative; text-indent:-999px; z-index:1003; } /* display:none; */ #menu { display: none;} } @media screen and (max-width: 738px) { #headerSp { display: block; position: fixed !important; top:0; left:0; width:100%; height:50px; z-index:1500; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; } .logoAreaSp { width:50px; height:50px; } .logoAreaSp h1.logo a { width:50px; height: 50px; background-size:40px 40px;} .titleAreaSp { width:154px; height:50px; z-index:9999; } .titleAreaSp h1.title a { width:154px; height: 50px; background-size:138px 45px; } } /* ----------------------------------------------------------- #link ----------------------------------------------------------- */ #link-about, #link-movie, #link-column, #link-recipe, #link-interview, #link-champaign { padding: 0; margin: 0; } #link-intro{ padding: 60px 0 0; margin: -60px 0 0; } @media screen and (max-width: 768px) { #link-about, #link-movie, #link-column, #link-recipe, #link-interview, #link-champaign { padding: 60px 0 0; margin: -60px 0 0; } #link-intro{ padding: 100px 0 0; margin: -100px 0 0; } } @media screen and (max-width: 738px) { #link-about, #link-movie, #link-column, #link-recipe, #link-interview, #link-champaign { padding: 50px 0 0; margin: -50px 0 0; } } /* ----------------------------------------------------------- #intro ----------------------------------------------------------- */ #intro { width:100%; min-height:100%; position:relative; z-index:1200; overflow:hidden; } /* ----- .bg1 ----- */ #intro .bg1 { position:absolute; top:0; left:0; bottom:0; right:0; z-index:1; background: url("../images/topImg.jpg") top center no-repeat; background-size:cover; background-attachment:fixed; } #intro .bg2 { position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; background: url("../images/pattern_movie.png") repeat; background-attachment:fixed; -webkit-animation: move-bg 12s linear infinite; -moz-animation: move-bg 12s linear infinite; -ms-animation: move-bg 12s linear infinite; -o-animation: move-bg 12s linear infinite; animation: move-bg 12s linear infinite;} #intro .bg2:before { position:absolute; top:0; left:0; bottom:0; right:0; z-index:3; content:""; background: url("../images/bgTopImg.png") repeat; opacity:0.4; background-attachment:scroll; } /* ----- .titleArea ----- */ #intro .titleArea { width: 1000px; max-width: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index:6; padding-bottom:3.5%;} /* ----- .bgCircle ----- */ #intro .titleArea .bgCircle { position:relative; width:545px; height:545px; margin:0 auto; background:url("../images/titleLogo.png") center center no-repeat; background-size:cover; position:relative; z-index:3; font-size:0; } #intro .titleArea .bgCircle:before {position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px; z-index:3; content:""; border-top:3px solid #fefefe;border-right:3px solid #8342ea; border-bottom:3px solid #fefefe; border-left:3px solid #8342ea; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin-right 7s linear infinite;-moz-animation:spin-right 7s linear infinite;-ms-animation:spin-right 7s linear infinite;-o-animation:spin-right 7s linear infinite;animation:spin-right 7s linear infinite} #intro .titleArea .bgCircle:after {position:absolute; top:-20px; right:-20px; bottom:-20px; left:-20px; z-index:3; content:""; border-top:2px solid #fefefe;border-right:2px solid #e803a4; border-bottom:2px solid #fefefe; border-left:2px solid #e803a4; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin-left 7s linear infinite;-moz-animation:spin-left 7s linear infinite;-ms-animation:spin-left 7s linear infinite;-o-animation:spin-left 7s linear infinite;animation:spin-left 7s linear infinite} /* ----- .arrowBtn ----- */ #intro .arrowArea { position: absolute; bottom: 15px; left: 50%; right: 0; display: block; text-align: center; height: 70px; width: 70px; margin: -35px 0 0 -35px; z-index: 10; } #intro .arrowArea a.arrowBtn { display: block; height: 70px; width: 70px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: scroll-next 2s infinite; -moz-animation: scroll-next 2s infinite; -o-animation: scroll-next 2s infinite; animation: scroll-next 2s infinite; } #intro .arrowArea a.arrowBtn:before { color:#fefefe; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; font-size: 18px; font-family: 'themify'; content: "\e64b"; font-weight: normal; line-height: 70px; content:"\e62a"; font-size:25px;} @media screen and (max-width: 1250px) { #intro .titleArea .bgCircle { width:500px; height:500px; } } @media screen and (max-width: 1150px) { #intro .titleArea .bgCircle { width:450px; height:450px; } } @media screen and (max-width: 1024px) { #intro .bg1 {background-attachment: scroll; } #intro .bg2 { background-attachment: scroll;} #intro .titleArea .bgCircle { width:400px; height:400px; } } @media screen and (max-width: 768px) { #intro .bg2 { background: url("../images/pattern_movie.png") repeat; background-size:250px 250px;-webkit-animation: move-bg 12s linear infinite; -moz-animation: move-bg 12s linear infinite; -ms-animation: move-bg 12s linear infinite; -o-animation: move-bg 12s linear infinite; animation: move-bg 12s linear infinite;} #intro .bg2:before { background-size:400px 300px; opacity:0.5;} #intro .titleArea .bgCircle { width:350px; height:350px; } } @media screen and (max-width: 738px) { #intro .titleArea .bgCircle { width:300px; height:300px; } #intro .titleArea img { width:45%; } #intro .arrowArea a.arrowBtn:before {font-size:20px;} } @media screen and (max-width: 414px) { #intro .bg2 { -webkit-animation: move-bg 16s linear infinite; -moz-animation: move-bg 16s linear infinite; -ms-animation: move-bg 16s linear infinite; -o-animation: move-bg 16s linear infinite; animation: move-bg 16s linear infinite;} #intro .titleArea { padding-bottom:1.5%;} #intro .titleArea .bgCircle { width:260px; height:260px; } #intro .titleArea .bgCircle:before {top:-5px; right:-5px; bottom:-5px; left:-5px; z-index:3; content:""; border-top:2px solid #fefefe;border-right:2px solid #8342ea; border-bottom:2px solid #fefefe; border-left:2px solid #8342ea; } #intro .titleArea .bgCircle:after {top:-15px; right:-15px; bottom:-15px; left:-15px; border-top:1px solid #fefefe;border-right:1px solid #e803a4; border-bottom:1px solid #fefefe; border-left:1px solid #e803a4; } } @media screen and (max-width: 320px) { #intro .titleArea .bgCircle { width:230px; height:230px; } } /* ----------------------------------------------------------- #about ----------------------------------------------------------- */ #about { position:relative; z-index:0; width:100%;} /* --- .img1 --- */ #about .img1 { background:url("../images/bgIntro2.jpg") no-repeat top center; background-size: 100% auto; background-size:cover; display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding-bottom: 108px;content: "";z-index: -1;} /* --- .bgColor --- */ #about .bgColor { margin-top:40%; padding:90px 5%; display: block; position:relative; z-index:1; background: #967ae1; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #b88de9), color-stop(0.00, #967ae1)); background: -webkit-linear-gradient(top, #967ae1 0%, #b88de9 88%); background: -moz-linear-gradient(top, #967ae1 0%, #b88de9 88%); background: -o-linear-gradient(top, #967ae1 0%, #b88de9 88%); background: -ms-linear-gradient(top, #967ae1 0%, #b88de9 88%); background: linear-gradient(to bottom, #967ae1 0%, #b88de9 88%);} #about .bgColor:after { position: absolute; top: -35px; left: 0; right: 0; height: 37px; display: block; content:""; background:url("../images/bgWave2.png") repeat left top; z-index: 0;} /* --- .inner --- */ #about .inner { margin:0 auto; position:relative; z-index:3; background:url("../images/pattern_aboutInner.png") center center repeat #f9f1ff;} #about .inner:before { position:absolute; top:10px; left:20px; right:20px; bottom:10px; content:""; border-top:#a276c9 double; border-bottom:#a276c9 double; z-index:1; } #about .inner:after { position:absolute; top:20px; left:10px; right:10px; bottom:20px; content:""; border-left:#a276c9 double; border-right:#a276c9 double; z-index:1; } /* --- .txtArea --- */ #about .inner .txtArea { padding:70px 10% 40px; } /* --- .txtArea --- */ #about .inner .bgArea { position:absolute; top:0; left:0; right:0; bottom:0; content:""; z-index:-1;background:#ecd9fb; opacity:0.9; } /* h3 */ #about .inner h3 { color:#411f70; font-size:24px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.8; letter-spacing:1.5px; position:relative; z-index:3; } #about .inner h3 b { color:#e803a4; font-size:1.2em; font-weight:normal;} /* --- .imgArea --- */ #about .inner .imgArea { margin-top:25px; } img.pcImg { display:block; } img.spImg { display:none; } /* --- .txtAreaInner --- */ #about .txtAreaInner { margin:25px auto 0; max-width:750px;position:relative; z-index:3; } /* p */ #about .inner p { color:#411f70; } /* --- .dateArea --- */ #about .inner .dateArea { padding:35px 10% 70px; position:relative; z-index:3; } #about .inner .dateArea:before { position:absolute; top:0; left:20px; right:20px; height:0; content:""; border-top:#a276c9 double; z-index:-1; } #about .inner .dateArea:after { position:absolute; top:10px; left:20px; bottom:20px; right:20px; content:""; background: url("../images/pattern_date.png") repeat #fefefe; z-index:-2; } /* --- dl.date --- */ #about dl.date { margin-top:20px; text-align: center; font-size:14px; letter-spacing:1px; } #about dl.date dt { display:block; width: 160px; padding:0; margin:0 auto; position:relative; color:#fefefe; background:#411f70; line-height:35px; position:relative; z-index:1; } #about dl.date dt:after { position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; content:""; border:#411f70 1px dotted; z-index:-1;} #about dl.date dd { margin-top:10px; color:#411f70; font-family: 'Josefin Sans',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-size:30px; font-weight:600; line-height:1.7; display:block; } #about dl.date dd span { font-size:0.7em; vertical-align:0; font-weight:normal; } @media screen and (max-width: 1024px) { /* --- .txtArea --- */ #about .inner .txtArea { padding:70px 5% 40px; } /* h3 */ #about .inner h3 { ont-size:22px; } /* --- dl.date --- */ #about dl.date dd { font-size:25px;} #about .inner .dateArea { padding:35px 5% 70px; } } @media screen and (max-width: 950px) { #about .inner h3 { font-size:20px;} #about dl.date dd { font-size:22px;} } @media screen and (max-width: 768px) { /* --- .img1 --- */ #about .img1 { background: none;} #about .img1:after { background:url("../images/bg1Sp.jpg") no-repeat top center ;background-size: 100% auto; background-size:cover; display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding-bottom: 108px;content: "";z-index: -1;} /* --- .bgColor --- */ #about .bgColor { margin-top:300px; padding:80px 5%; } #about .bgColor:after { top: -17px; height: 19px; background-size:100px 19px;} /* --- .inner --- */ #about .inner { background-size:250px 250px; } #about .inner:before { top:5px; left:15px; right:15px; bottom:5px; } #about .inner:after { top:15px; left:5px; right:5px; bottom:15px; } img.pcImg { display:none; } img.spImg { display:block; } /* --- .txtArea --- */ #about .inner .txtArea { padding:60px 7.5% 30px; text-align:left; } #about .inner .txtArea p br{ display:none; } /* h3 */ #about .inner h3 { font-size:20px; text-align:center; } /* --- .dateArea --- */ #about .inner .dateArea { padding:30px 5% 60px; } #about .inner .dateArea:before { left:15px; right:15px; } #about .inner .dateArea:after { top:10px; left:15px; bottom:15px; right:15px; background-size:75px 75px; z-index:-2; } /* --- dl.date --- */ #about dl.date { font-size:13px; } } @media screen and (max-width: 738px) { #about .bgColor { padding:70px 5%; } #about .inner .txtArea { padding:50px 7.5% 30px; } #about .inner .dateArea { padding:25px 5% 50px; } #about .inner h3 { font-size:18px;} #about dl.date dd { font-size:20px;} } @media screen and (max-width: 667px) { #about .inner h3 { font-size:16px; letter-spacing:1px;} #about dl.date dd { font-size:18px;} #about .txtAreaInner h3 b { font-size:1em;} } @media screen and (max-width: 414px) { #about .bgColor { padding:60px 5%; } #about .inner .imgArea { margin-top:15px; } #about .inner .txtArea { padding:50px 7% 30px;} #about .inner h3 { font-size:15px; } #about dl.date dd { font-size:17px;} #about .txtAreaInner h3 b { font-size:0.9em;} } @media screen and (max-width: 350px) { #about .inner h3 { font-size:13px; } #about .inner .txtArea { padding:50px 5% 30px; } } /* ----------------------------------------------------------- #content ----------------------------------------------------------- */ #content { position:relative; z-index:1; } /* --- .central --- */ .central { margin:0 auto; max-width:1200px; text-align:center; } /* ----------------------------------------------------------- .headline ----------------------------------------------------------- */ .headline { margin:0 auto 40px; display:inline-block; width:460px; max-width:100%; padding:35px 2.5%; position:relative; background:#fefefe; text-align:center; z-index:1;} .headline:before { position:absolute; top:5px; left:10px; right:10px; bottom:5px; content:""; border-top:#541b86 1px solid; border-bottom:#541b86 1px solid; z-index:1; } .headline:after { position:absolute; top:10px; left:5px; right:5px; bottom:10px; content:""; border-left:#541b86 1px solid; border-right:#541b86 1px solid; z-index:1; } .headline h2 { position:relative; z-index:2; } .headline h2.en { color:#e803a4;font-size:16px; letter-spacing:2px;font-family: 'Josefin Sans', sans-serif; font-weight:700; line-height:1.6; } .headline h2.jp { color:#541b86;font-size:18px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";font-weight:bold; letter-spacing:2px; line-height:1.6; margin-top:5px; } .headline h2.en i { font-size:10px; vertical-align:0; padding:0 2px; } @media screen and (max-width: 768px) { .headline { margin:0 auto 40px; } .headline h2.en { font-size:15px; } .headline h2.jp { font-size:17px;} } @media screen and (max-width: 768px) { .headline { margin:0 auto 35px; } .headline h2.en { font-size:14px; } .headline h2.jp { font-size:16px;} } @media screen and (max-width: 414px) { .headline { margin:0 auto 30px; } .headline h2.en { font-size:13px; } .headline h2.jp { font-size:14px; letter-spacing:1px; margin-top:2px; } } /* ----------------------------------------------------------- #movie ----------------------------------------------------------- */ #movie { padding:90px 5%; background: url("../images/pattern_movie.png") center center repeat #c3a6ef; position:relative; } @media screen and (max-width: 768px) { #movie { padding:80px 5%; background-size:250px 250px; } } @media screen and (max-width: 738px) { #movie { padding:70px 5%; } } @media screen and (max-width: 414px) { #movie { padding:60px 5%; } } /* ======== .inner ======== */ #movie .inner { margin:0 auto; padding:70px 10%; background:#fefefe; background:url("../images/bgAbout2.png") repeat rgba(255,255,255,0.8); position:relative; z-index:2;} #movie .inner p { letter-spacing:1.5px;} /* --- h3 --- */ #movie h3 { color:#541b86; font-size:15px; font-family: 'Playfair Display', serif; font-style:italic; font-weight:400; letter-spacing:2px; position:relative; line-height:20px; margin-bottom:30px; } #movie h3:before { position:absolute; top:10px; right:60%; left:0; content:""; border-top:#411f70 1px dotted; z-index:-2;} #movie h3:after { position:absolute; top:10px; right:0; left:60%; content:""; border-top:#411f70 1px dotted; z-index:-2;} /* --- .movieArea --- */ #movie .movieArea { margin:45px auto 0; max-width:900px;z-index:0;} #movie .movieBox { position:relative; z-index:0; } #movie .movieBox img { width:100%; } #movie .movieBox:before { position:absolute; top:0; right:0; bottom:0; left:0; content:""; background:#411f70; opacity:0.7; z-index:2;} /* --- a.btnYoutube --- */ #movie a.btnYoutube { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; display:block; width:75px; height:75px; line-height:75px; color:#fefefe; background: url("../images/btnT.png") center center no-repeat #F69; text-align:center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; font-size:0; z-index:4; } #movie a.btnYoutube:hover {background: url("../images/btnT.png") center center no-repeat #e803a4; width:85px; height:85px; line-height:85px;} /* --- span.btnYoutubeBorder --- */ #movie span.btnYoutubeBorder {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; display:block; width:100px; height:100px; line-height:75px; z-index:3; border-top:1px solid #fefefe;border-right:1px solid #F69; border-bottom:1px solid #fefefe; border-left:1px solid #F69; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin-right 3s linear infinite;-moz-animation:spin-right 3s linear infinite;-ms-animation:spin-right 3s linear infinite;-o-animation:spin-right 3s linear infinite;animation:spin-right 3s linear infinite} /* --- .questionArea --- */ #movie .questionArea { margin:35px 0 0; padding:70px 5% 60px; position:relative; z-index:3; background: url("../images/pattern_date.png") repeat #fefefe;} #movie .questionArea:before { position:absolute; top:5px; left:15px; right:15px; bottom:5px; content:""; border-top:#a276c9 double; border-bottom:#a276c9 double; z-index:1; } #movie .questionArea:after { position:absolute; top:15px; left:5px; right:5px; bottom:15px; content:""; border-left:#a276c9 double; border-right:#a276c9 double; z-index:1; } /* --- dl.question --- */ #movie dl.question { text-align: center; font-size:14px; letter-spacing:1px; position:relative; z-index:2; } #movie dl.question dt { display:block; width: 160px; padding:0; margin:0 auto; position:relative; color:#fefefe; background:#e803a4; line-height:35px; position:relative; z-index:1; } #movie dl.question dt:after { position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; content:""; border:#e803a4 1px dotted; z-index:-1;} #movie dl.question dd { margin-top:15px; color:#e803a4; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-size:30px; font-weight:normal; line-height:1.7; display:block; } /* --- dl.hint --- */ #movie dl.hint { margin-top:25px; text-align: center; font-size:14px; letter-spacing:1px; position:relative; z-index:2; } #movie dl.hint dt { display:block; width: 160px; padding:0; margin:0 auto; position:relative; color:#fefefe; background:#411f70; line-height:35px; position:relative; z-index:1; } #movie dl.hint dt:after { position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; content:""; border:#411f70 1px dotted; z-index:-1;} #movie dl.hint dd { margin-top:15px; color:#411f70; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-size:25px; font-weight:normal; line-height:1.8; display:block; } /* --- dl.hint --- */ #movie ul.question { list-style:none; font-size:0; max-width:700px; margin:10px auto 0; position:relative; z-index:2; } #movie ul.question li { display:inline-block; position:relative; margin:15px 1% 0; padding:0; height:60px; width:47%; background:#fff3fa; background:rgba(255,243,250,0.8); color:#411f70; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-size:18px; font-weight:normal; line-height:60px; letter-spacing: 1px; } #movie ul.question li:before { position:absolute; top:0; left:15px; bottom:0; width:25px; color:#411f70; vertical-align:top; color:#e803a4; font-size:20px; font-family: 'Playfair Display', serif; font-weight:400; line-height:50px;} #movie ul.question li:nth-child(1):before { content:"1.";} #movie ul.question li:nth-child(2):before { content:"2.";} #movie ul.question li:nth-child(3):before { content:"3.";} #movie ul.question li:nth-child(4):before { content:"4.";} @media screen and (max-width: 1024px) { /* --- .inner --- */ #movie .inner { padding:70px 5%;} #movie .inner p { letter-spacing:1px;} /* --- dl.question --- */ #movie dl.question dd { font-size:22px; } /* --- dl.hint --- */ #movie dl.hint dd {font-size:20px; } #movie ul.question li { height:60px; width:47%; font-size:16px; } #movie ul.question li:before { font-size:20px; line-height:52px;} } @media screen and (max-width: 950px) { #movie dl.question dd { font-size:20px; } #movie ul.question li { margin:10px 1% 0; } } @media screen and (max-width: 768px) { /* --- .inner --- */ #movie .inner { padding:60px 5%; background-size:400px 300px;} #movie .inner p { letter-spacing:1.5px;} /* --- h3 --- */ #movie h3 { margin-bottom:25px; } #movie h3:before { right:65%; } #movie h3:after { left:65%; } /* --- .movieArea --- */ #movie .movieArea { margin:35px auto 0; } /* --- a.btnYoutube --- */ #movie a.btnYoutube { width:65px; height:65px; line-height:65px; background: url("../images/btnTSp.png") center center no-repeat #F69; background-size:15px 17px; } #movie a.btnYoutube:hover {width:65px; height:65px; line-height:65px; background: url("../images/btnTSp.png") center center no-repeat #F69; background-size:15px 17px;} /* --- span.btnYoutubeBorder --- */ #movie span.btnYoutubeBorder {width:85px; height:85px;} #movie .questionArea { margin:30px 0 0; padding:60px 5% 50px; background: url("../images/pattern_date.png") repeat #fefefe; background-size:75px 75px;} /* --- dl.question --- */ #movie dl.question, #movie dl.hint { font-size:13px;} #movie ul.question li { margin:10px 1% 0; height:50px; width:47%; font-size:15px; line-height:50px; } #movie ul.question li:before { font-size:18px; line-height:45px;} } @media screen and (max-width: 738px) { #movie .inner { padding:50px 5%;} #movie .inner p { text-align:left;} #movie .inner p br.spNone { display:none;} #movie h3 { margin-bottom:20px; } #movie .movieArea { margin:30px auto 0; } /* --- dl.hint --- */ #movie .questionArea { margin:30px 0 0; padding:50px 5% 40px; } #movie dl.hint { margin-top:25px; } #movie dl.question dt, #movie dl.hint dt { width:100px; } #movie dl.question dd, #movie dl.hint dd { font-size:18px;} #movie ul.question { margin:25px auto 0; } #movie ul.question li { display:block; margin:10px auto 0; height:50px; width:100%; max-width:350px; font-size:15px; line-height:50px; } #movie ul.question li:before { font-size:18px; line-height:45px;} } @media screen and (max-width: 414px) { #movie h3:before { right:70%; } #movie h3:after { left:70%; } #movie .inner p { padding:0 2.5%;} /* --- a.btnYoutube --- */ #movie a.btnYoutube { width:55px; height:55px; line-height:55px; } #movie a.btnYoutube:hover {width:55px; height:55px; line-height:55px; } /* --- span.btnYoutubeBorder --- */ #movie span.btnYoutubeBorder {width:65px; height:65px;} #movie dl.question dd, #movie dl.hint dd { font-size:15px;} #movie ul.question li { margin:5px auto 0; } } @media screen and (max-width: 320px) { #movie dl.question dd { font-size:14px;} #movie ul.question li { font-size:14px; } #movie ul.question li:before { font-size:17px; line-height:45px;} } /* ======== .snsArea ======== */ #movie .snsArea { margin-top:30px; position:relative; z-index:3; } #movie .snsArea h4 {color:#e803a4; font-size:25px; font-family: 'Josefin Sans', sans-serif; font-weight:600 ;letter-spacing:2px; text-align:center; line-height:1;} /* --- .snsBtnArea --- */ #movie ul.snsBtnArea { margin:10px -1.5% 0; font-size:0; text-align:center; } #movie ul.snsBtnArea li { display:inline-block; font-size: 13px; font-weight: normal; font-style: normal; letter-spacing: 1px; margin: 15px 1.5% 0; width:30.333%; min-width:240px; } #movie ul.snsBtnArea li a { display:block; margin:0 auto; padding: 0 0 0 10px; color:#fefefe; height:50px; line-height:50px; position:relative;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; } #movie ul.snsBtnArea li a:before { position: absolute; top: 0; left: 15px; bottom: 0; display: block; font-size: 18px; font-family: 'themify'; font-weight: normal; line-height: 50px;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #movie ul.snsBtnArea li a.twitterBtn { background: #2ca7e0; } #movie ul.snsBtnArea li a.twitterBtn:before { content: "\e74b"; } #movie ul.snsBtnArea li a.facebookBtn { background: #3c599f; } #movie ul.snsBtnArea li a.facebookBtn:before { content: "\e741"; } #movie ul.snsBtnArea li a.lineBtn { background: #00b500; } #movie ul.snsBtnArea li a.lineBtn:before { left: 15px; display: block; content: ""; background:url("../images/logoLine.png") left center no-repeat; width:25px; background-size:25px 25px;} #movie ul.snsBtnArea li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #movie ul.snsBtnArea li a:hover:before {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);} #movie ul.snsBtnArea li.line { display:none; } @media screen and (max-width: 768px) { #movie .snsArea { margin-top:30px;} #movie ul.snsBtnArea li { width:47%; } #movie ul.snsBtnArea li.line { display:inline-block; } #movie ul.snsBtnArea li a:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #movie ul.snsBtnArea li a:hover:before {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} } @media screen and (max-width: 738px) { #movie ul.snsBtnArea { margin:10px -1.5% 0; } #movie ul.snsBtnArea li { min-width:0; width:47%;} #movie .snsArea h4 {font-size:20px;} } @media screen and (max-width: 414px) { #movie ul.snsBtnArea { margin:10px 0 0; } #movie ul.snsBtnArea li { display:block; font-size: 13px; margin: 10px auto 0; width:100%; } #movie ul.snsBtnArea li.line { display:block; } #movie ul.snsBtnArea li a { margin:0 auto; padding: 0 0 0 10px; width:250px; max-width:100%; } } /* ----------------------------------------------------------- #interview ----------------------------------------------------------- */ #interview { padding:90px 5%; background: url("../images/pattern_10.png") bottom repeat; position:relative; overflow:hidden; } @media screen and (max-width: 768px) { #interview { padding:80px 5%; /*background-size:200px 200px; */} } @media screen and (max-width: 738px) { #interview { padding:70px 5%; } } @media screen and (max-width: 414px) { #interview { padding:60px 5%; } } /* ======== .interviewBox ======== */ #interview .interviewArea { } /* --- .interviewBox --- */ #interview .interviewBox { width:100%; margin:0 auto; background:#fefefe; text-align:left; position:relative; z-index:1; } /* --- .imgArea --- */ #interview .interviewBox .imgArea { position:absolute; top:40px; left:40px; right:40px; bottom:40px; background:url("../images/bgInteview.jpg") top right no-repeat; background-size:cover; z-index:2; } /* --- .txtArea --- */ #interview .interviewBox .txtArea { display: block; width:55%; padding:300px 0; margin-left:40px; text-align: center; position:relative; z-index:3; } /* h3.word */ #interview .interviewBox .txtArea h3.word { display:inline-block; color:#541b86;font-size:28px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.8; letter-spacing:1.5px; position:relative; z-index:1; padding:0 3%; } #interview .interviewBox .txtArea h3.word:before, #interview .interviewBox .txtArea h3.word:after { color:#d50698; color:#d4b3fa;font-size:35px; line-height:1; } #interview .interviewBox .txtArea h3.word:before { position:absolute; top:-5px; left:0;content:"『"; z-index:-1;} #interview .interviewBox .txtArea h3.word:after { position:absolute; right:-5px; bottom:-5px; content: "』";z-index:-1; } /* h3.sign */ #interview .interviewBox .txtArea h3.sign { margin-top:5px; color:#e803a4;font-size:23px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:2; letter-spacing:1.5px;} #interview .interviewBox .txtArea h3.sign span { color:#d4b3fa;font-size:0.8em; font-family: 'Playfair Display', serif; font-weight:400; font-style:italic; vertical-align:0;} @media screen and (max-width: 1250px) { #interview .interviewBox .txtArea { padding:250px 0; } } @media screen and (max-width: 1100px) { #interview .interviewBox .txtArea { padding:220px 0; } /* h3.word */ #interview .interviewBox .txtArea h3.word { font-size:25px; line-height:1.8; } #interview .interviewBox .txtArea h3.word:before, #interview .interviewBox .txtArea h3.word:after { font-size:32px; } #interview .interviewBox .txtArea h3.sign { font-size:21px;} } @media screen and (max-width: 1024px) { #interview .interviewBox .imgArea { top:25px; left:25px; right:25px; bottom:25px; background:url("../images/bgInteview.jpg") top right no-repeat; background-size:cover; } #interview .interviewBox .txtArea { padding:200px 0; margin-left:25px; } #interview .interviewBox .txtArea h3.word { font-size:22px; line-height:1.8; } #interview .interviewBox .txtArea h3.word:before, #interview .interviewBox .txtArea h3.word:after { font-size:28px; } #interview .interviewBox .txtArea h3.sign { font-size:18px;} } @media screen and (max-width: 950px) { #interview .interviewBox .imgArea { position: relative; top:0; right:0; bottom:0; left:0; height:400px; } #interview .interviewBox .txtArea { width:100%; padding:40px 5%; margin-left:0px; border-top:#ebdbfd 1px solid;} #interview .interviewBox .txtArea h3.word { font-size:20px; } #interview .interviewBox .txtArea h3.word:before, #interview .interviewBox .txtArea h3.word:after { font-size:28px; } #interview .interviewBox .txtArea h3.sign { font-size:18px;} } @media screen and (max-width: 768px) { #interview .interviewBox .imgArea { background:url("../images/imgInteviewSp.jpg") top center no-repeat; background-size:cover; height:350px; } } @media screen and (max-width: 738px) { #interview .interviewBox .txtArea { padding:40px 5%; } #interview .interviewBox .txtArea h3.word { font-size:18px; } #interview .interviewBox .txtArea h3.word:before, #interview .interviewBox .txtArea h3.word:after { font-size:25px; } #interview .interviewBox .txtArea h3.sign { font-size:16px;} } @media screen and (max-width: 667px) { #interview .interviewBox .txtArea h3.word { font-size:16px; } #interview .interviewBox .txtArea h3.word:before, #interview .interviewBox .txtArea h3.word:after { font-size:23px; } #interview .interviewBox .txtArea h3.sign { font-size:14px;} } @media screen and (max-width: 414px) { #interview .interviewBox .txtArea { padding:35px 5%; } #interview .interviewBox .imgArea { height:250px; } } @media screen and (max-width: 380px) { #interview .interviewBox .txtArea h3.word { font-size:15px; } #interview .interviewBox .txtArea h3.sign { font-size:14px;} } /* ======== .interviewBox2 ======== */ #interview .interviewBox2 { margin-top:25px; padding:55px 7.5%;background:#fefefe; background: url("../images/bgStar2.png") repeat rgba(255,255,255,0.8);text-align:center; overflow:hidden;position:relative; z-index:3; } #interview .interviewBox2:before { position:absolute; top:10px; left:20px; right:20px; bottom:10px; content:""; border-top:#a276c9 double; border-bottom:#a276c9 double; z-index:1; } #interview .interviewBox2:after { position:absolute; top:20px; left:10px; right:10px; bottom:20px; content:""; border-left:#a276c9 double; border-right:#a276c9 double; z-index:1; } #interview .interviewBox2 h4 { color:#e803a4;font-size:24px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.8; letter-spacing:1.5px; position:relative; z-index:3; margin-bottom:10px; } #interview .interviewBox2 br.sbBlock { display:none; } @media screen and (max-width: 1024px) { #interview .interviewBox2 { padding:55px 5%; } #interview .interviewBox2 h4 { font-size:18px; } } @media screen and (max-width: 768px) { #interview .interviewBox2:before { top:5px; left:15px; right:15px; bottom:5px; } #interview .interviewBox2:after { top:15px; left:5px; right:5px; bottom:15px;} #interview .interviewBox2 { padding:50px 5%; } #interview .interviewBox2 h4 { font-size:16px; } } @media screen and (max-width: 738px) { #interview .interviewBox2 { padding:45px 7.5%; } #interview .interviewBox2 h4 { font-size:15px; } } @media screen and (max-width: 667px) { #interview .interviewBox2 br.sbBlock { display:block; } #interview .interviewBox2 h4 { } #interview .interviewBox2 p { text-align:left; } #interview .interviewBox2 p br { display:none; } } /* ======== .columnQABox ======== */ #interview .columnQABox { margin-top:25px; margin-right:2.5%;position:relative; z-index:1; } /* --- .imgArea --- */ #interview .columnQABox .imgArea { position:absolute; top:0; left:0; width:35%; z-index:2; } #interview .columnQABox .imgArea .inner { position:relative; z-index:2; } #interview .columnQABox .imgArea .inner:after { position:absolute; top:15px; right:-15px; left:15px; bottom:-15px; content:""; background:#411f70; z-index:-1; opacity:0.7; background: url("../images/stripe_purple.png") repeat;} #interview .columnQABox .imgArea .inner img {border:#ebdbfd 1px solid; } /* --- .txtArea --- */ #interview .columnQABox .txtArea { width:80%; margin-left:20%; margin-top:30px; z-index:-1; position:relative; background:#fefefe;background:rgba(255,255,255,0.8); } /* --- dl.faq --- */ dl.faq { text-align: left; font-size:14px; line-height:1.8; letter-spacing:1px; padding:90px 7.5% 70px 25%;} dl.faq dt { display:block; float:none; width: 100%; padding:0; margin-bottom:20px; position:relative; color:#e803a4;font-size:20px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.7; } dl.faq dt:before { position:absolute; top:-20px; left:85px; right:0; height:0; content:""; border-bottom:#541b86 1px dotted; z-index:1; line-height:1;} dl.faq dt:after { position:absolute; top:-35px; left:0; content:"Interview"; color:#541b86; font-size:13px; font-family: 'Playfair Display', serif; font-style:italic; font-weight:400; letter-spacing:2px; line-height:25px; z-index:2; padding:0 10px 0 3px;} dl.faq dd { line-height:1.9; } /* --- .columnQABox2 --- */ #interview .columnQABox2 { margin-top:25px; margin-left:2.5%; position:relative; z-index:1; } #interview .columnQABox2 .imgArea { position:absolute; top:0; right:0; width:35%; z-index:2; } #interview .columnQABox2 .imgArea .inner { position:relative; z-index:2; } #interview .columnQABox2 .imgArea .inner:after { position:absolute; top:15px; right:15px; left:-15px; bottom:-15px; content:""; background:#e803a4; z-index:-1; opacity:0.7; background: url("../images/stripe_pink.png") repeat;} #interview .columnQABox2 .imgArea .inner img { border:#ffdeed 1px solid; } #interview .columnQABox2 .txtArea { width:80%; margin-top:30px; z-index:-1; position:relative; background:#fefefe;background:rgba(255,255,255,0.8);} /* --- dl.faq --- */ #interview .columnQABox2 dl.faq { padding:90px 25% 70px 7.5%;} @media screen and (max-width: 1024px) { #interview .columnQABox .imgArea .inner:after { top:10px; right:-10px; left:10px; bottom:-10px;} dl.faq dt { font-size:18px;} #interview .columnQABox2 .imgArea .inner:after { top:10px; right:10px; left:-10px; bottom:-10px;} } @media screen and (max-width: 768px) { #interview .columnQABox, #interview .columnQABox2 { margin-top:20px; } dl.faq { font-size:14px; padding:80px 7.5% 60px 25%;} #interview .columnQABox2 dl.faq { padding:80px 25% 60px 7.5%;} } @media screen and (max-width: 738px) { #interview .columnQABox, #interview .columnQABox2 { margin:25px 0 0; padding:45px 7.5% 45px; background:rgba(255,255,255,0.8);} #interview .columnQABox .imgArea, #interview .columnQABox2 .imgArea { position: relative; width:100%;} #interview .columnQABox .imgArea .inner:after, #interview .columnQABox2 .imgArea .inner:after { top:-10px; right:-10px; left:-10px; bottom:-10px;} #interview .columnQABox .txtArea, #interview .columnQABox2 .txtArea { width:100%; margin-left:0; margin-top:35px; background:none; } dl.faq, #interview .columnQABox2 dl.faq { font-size:13px; line-height:1.8; padding:40px 0 0;} dl.faq dt { display:block; float:none; width: 100%; margin-bottom:15px; font-size:15px; line-height:1.7; } dl.faq dd { line-height:1.9; } } @media screen and (max-width: 414px) { #interview .columnQABox, #interview .columnQABox2 { padding:25px 7.5% 45px; } #interview .columnQABox .txtArea, #interview .columnQABox2 .txtArea {margin-top:30px; } } /* ======== .columnProfileBox ======== */ #interview .columnProfileBox { margin-top:55px;} /* --- .imgArea --- */ #interview .columnProfileBox .imgArea { float:left; width:50%; position:relative; z-index:0; background:url("../images/imgProfile.jpg") top center no-repeat; background-size:cover; } /* --- .txtArea --- */ #interview .columnProfileBox .txtArea { float:right; width:50%; text-align:left; padding:70px 5%; background:#fefefe; background:rgba(255,255,255,0.8); } #interview .columnProfileBox .txtArea p { font-size:14px; } /* h4 */ #interview .columnProfileBox h4 { color:#541b86; font-size:13px; font-family: 'Playfair Display', serif; font-style:italic; font-weight:400; letter-spacing:2px; position:relative; line-height:10px; margin-bottom:15px; } #interview .columnProfileBox h4:before { position:absolute; top:5px; left:65px; right:0; height:0; content:""; border-bottom:#541b86 1px dotted; z-index:1;} #interview .columnProfileBox h3 { color:#e803a4;font-size:18px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.7;letter-spacing:1.5px; margin-bottom:5px; } @media screen and (max-width: 1024px) { #interview .columnProfileBox h3 { font-size:18px; } } @media screen and (max-width: 768px) { #interview .columnProfileBox { margin-top:40px;} #interview .columnProfileBox .txtArea { padding:60px 5%; } } @media screen and (max-width: 738px) { #interview .columnProfileBox { margin-top:25px;} #interview .columnProfileBox .txtArea { padding:45px 5%; } #interview .columnProfileBox h3 { font-size:16px; } #interview .columnProfileBox .txtArea p { font-size:13px; } } @media screen and (max-width: 667px) { #interview .columnProfileBox .imgArea { float:none; width:100%; position:relative; height:250px; z-index:0; background:url("../images/imgProfile.jpg") top center no-repeat; background-size:cover; } #interview .columnProfileBox .txtArea { float:none; width:100%; text-align:left; padding:45px 7.5%; } } @media screen and (max-width: 414px) { #interview .columnProfileBox .imgArea { height:200px; } #interview .columnProfileBox h3 { font-size:15px; } #interview .columnProfileBox .txtArea { padding:25px 7.5% 45px; } } /* ----------------------------------------------------------- #column ----------------------------------------------------------- */ #column { padding:90px 5%; position:relative;background: url("../images/pattern_2.png") center center repeat #ebdbfd;} @media screen and (max-width: 768px) { #column { padding:80px 5%; background-size:200px 200px; } } @media screen and (max-width: 738px) { #column { padding:70px 5%; } } @media screen and (max-width: 414px) { #column { padding:60px 5%; } } /* ======== .columnArea ======== */ #column .columnArea { margin-top:-10px; } /* --- .columnBox --- */ #column .columnBox { margin-top:10px;} /* --- .imgArea --- */ #column .columnBox .imgArea { float:left; width:50%; position:relative; z-index:0; } #column .column1 .imgArea { background: url("../images/bgColumn1.jpg") center center no-repeat; background-size:cover; } #column .column2 .imgArea { background: url("../images/bgColumn2.jpg") center center no-repeat; background-size:cover; } #column .column3 .imgArea { background: url("../images/bgColumn3.jpg") center center no-repeat; background-size:cover; } /* .imgArea .bgOverlay */ #column .column1 .imgArea .bgOverlay, #column .column2 .imgArea .bgOverlay, #column .column3 .imgArea .bgOverlay { position:absolute; top:0px; right:0px; bottom:0px; left:0px; background: url("../images/noise.png") repeat rgba(26,8,54,0.3); content:""; z-index:2;} /* .imgArea .catch */ #column .column1 .imgArea .catch, #column .column2 .imgArea .catch, #column .column3 .imgArea .catch { width:100%; max-width: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index:3;} /* .imgArea .catch p */ #column .column1 .imgArea .catch p, #column .column2 .imgArea .catch p, #column .column3 .imgArea .catch p {color:#ffcce9;font-size:18px; font-family: 'Playfair Display', serif; font-weight:400; } /* .imgArea .catch h3 */ #column .column1 .imgArea .catch h3, #column .column2 .imgArea .catch h3, #column .column3 .imgArea .catch h3 { color:#fff; font-size:24px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:bold; line-height:1.8; letter-spacing:1px; } #column .column1 .imgArea .catch h3 span, #column .column2 .imgArea .catch h3 span, #column .column3 .imgArea .catch h3 span { padding-bottom:2px;background:url("../images/txt_wave.png") bottom left repeat-x; } /* --- .txtArea --- */ #column .columnBox .txtArea { float:right; width:50%; background:#fefefe; text-align:left; } #column .columnBox .txtArea .inner { padding:70px 10%; } #column .columnBox .txtArea p { font-size:14px; } @media screen and (max-width: 1024px) { /* .imgArea .catch h3 */ #column .column1 .imgArea .catch h3, #column .column2 .imgArea .catch h3, #column .column3 .imgArea .catch h3 { font-size:22px;} } @media screen and (max-width: 950px) { #column .columnBox .imgArea { float:none; width:100%; height:350px; } #column .columnBox .txtArea { float:none; width:100%; } #column .column1 .imgArea .catch h3, #column .column2 .imgArea .catch h3, #column .column3 .imgArea .catch h3 { font-size:20px; } #column .columnBox .txtArea .inner { padding:70px 7.5%; } } @media screen and (max-width: 768px) { #column .columnBox .txtArea .inner { padding:60px 7.5%; } #column .column1 .imgArea .catch h3 span, #column .column2 .imgArea .catch h3 span, #column .column3 .imgArea .catch h3 span { padding-bottom:2px;background:url("../images/txt_wave.png") bottom left repeat-x; background-size:26px 2px; } } @media screen and (max-width: 738px) { #column .columnArea { margin-top:-25px; } /* .columnBox */ #column .columnBox { margin-top:25px;} #column .columnBox .imgArea { height:300px; } #column .column1 .imgArea .catch h3, #column .column2 .imgArea .catch h3, #column .column3 .imgArea .catch h3 { font-size:18px; } /* --- .txtArea --- */ #column .columnBox .txtArea { float:none; width:100%; } #column .columnBox .txtArea .inner { padding:45px 7.5%; } #column .columnBox .txtArea p { font-size:13px; } } @media screen and (max-width: 414px) { #column { padding:60px 5%; } #column .columnBox .imgArea { height:225px; } #column .column1 .imgArea .bgOverlay, #column .column2 .imgArea .bgOverlay, #column .column3 .imgArea .bgOverlay { background: url("../images/noise.png") repeat rgba(26,8,54,0.35);} #column .column1 .imgArea .catch h3, #column .column2 .imgArea .catch h3, #column .column3 .imgArea .catch h3 { font-size:18px; } #column .columnBox .txtArea .inner { padding:30px 7.5% 45px; } } /* ======== .menuArea ======== */ #column .menuArea { margin-top:-10px; } /* --- .headlineMenu --- */ #column .headlineMenu { margin-top:50px; } /* --- .menuBox --- */ #column .menuBox { margin-top:10px; background:#fefefe; } #column .menuArea .inner { padding:70px 5%; } /* --- .imgArea --- */ #column .menuBox .imgArea { float:left; width:45%; position:relative; z-index:2; } #column .menuBox .imgArea_purple:after { position:absolute; top:15px; right:15px; left:-15px; bottom:-15px; content:""; background: url("../images/stripe_purple.png") repeat; z-index:-1; opacity:1; } #column .menuBox .imgArea_pink:after { position:absolute; top:15px; right:15px; left:-15px; bottom:-15px; content:""; background: url("../images/stripe_pink.png") repeat; z-index:-1; opacity:1; } #column .menuBox .imgArea_purple img { border:#ebdbfd 1px solid; } #column .menuBox .imgArea_pink img { border:#ffdeed 1px solid; } /* --- .txtArea --- */ #column .menuBox .txtArea { float:right; width:50%; } /* --- .head --- */ #column .menuArea .head { margin:0; padding:25px 5%; background:#fefefe; position:relative; z-index:2; text-align:center; } #column .menuArea .head:before { position:absolute; top:0px; left:5px; right:5px; bottom:0px; content:""; border-top:#8343ba 1px dotted; border-bottom:#8343ba 1px dotted; z-index:1; } #column .menuArea .head:after { position:absolute; top:5px; left:0px; right:0px; bottom:5px; content:""; border-left:#8343ba 1px dotted; border-right:#8343ba 1px dotted; z-index:1; } #column .menuArea .head span.No { position:absolute; top:-17px; left:50%; width:70px; height:30px; margin-left:-35px; color:#e803a4; background:#fefefe; font-size:18px; font-family: 'Playfair Display', serif; font-weight:400; line-height:30px; z-index:3; } #column .menuArea .head h4 { font-size:14px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.7; letter-spacing:1px; position:relative; z-index:3; } #column .menuArea .head h4 b { display:block; font-size:20px; font-weight:bold; } /* --- .catchArea --- */ #column .menuBox .catchArea { margin-top:15px;} #column .menuBox .catchArea ul { list-style:none; text-align:left; } #column .menuBox .catchArea ul li { display:block; padding-left:2em; position:relative; font-size:13px; line-height:1.9; letter-spacing:1px; margin-top:3px; } #column .menuBox .catchArea ul li:before { position:absolute; top:0; left:0; color:#d50698;font-family: 'themify'; content: "\e64c"; font-weight:normal; } #column .menuBox .catchArea h4 { font-size:13px; font-weight:normal; line-height:1.9; letter-spacing:1px;} /* --- .materialArea --- */ .materialArea { } /* h5 */ #column .menuArea h5 {color:#411f70;font-size:16px; font-weight:normal; line-height:1.7; letter-spacing:1px; text-align:center; margin-top:25px; } #column .menuArea h5.point { color:#e803a4;} /* --- .pointArea --- */ #column .menuBox .pointArea { margin-top:10px; text-align:left; padding:15px 5%;background:#fff3fa; } #column .menuBox .pointArea p { font-size:13px;line-height:1.9; } /* --- table.tableMaterial --- */ table.tableMaterial { width:100%; border-collapse: collapse;margin:15px 0 0;text-align: left;font-size:13px;letter-spacing:1px;line-height:1.8;} table.tableMaterial th {width:50%;padding:10px 0;vertical-align: 0;border: #ebdbfd 1px dotted; border-right:none; border-left:none;} table.tableMaterial td {width:50%;padding:10px 0;vertical-align: 0;border: #ebdbfd 1px dotted; border-right:none; border-left:none; text-align:right;} /* --- ul.recipe --- */ #column ul.recipe { list-style:none; margin:10px 0 0; font-size:0; } #column ul.recipe li { display:block; position:relative; margin:0; padding:15px 5% 15px 45px; background:#f7f3fc; border:#fefefe 2px solid;font-size: 13px; font-weight: normal; letter-spacing: 1px; line-height: 2; text-align:left; } #column ul.recipe li:before { position:absolute; top:10px; left:15px; width:25px; color:#411f70; vertical-align:top; font-size:25px; font-family: 'Playfair Display', serif; font-weight:400; line-height:1;} #column ul.recipe li:nth-child(1):before { content:"1.";} #column ul.recipe li:nth-child(2):before { content:"2.";} #column ul.recipe li:nth-child(3):before { content:"3.";} #column ul.recipe li:nth-child(4):before { content:"4.";} #column ul.recipe li:nth-child(5):before { content:"5.";} #column ul.recipe li:nth-child(6):before { content:"6.";} @media screen and (max-width: 1024px) { #column .menuBox .imgArea_purple:after { top:10px; right:10px; left:-10px; bottom:-10px;} #column .menuBox .imgArea_pink:after { top:10px; right:10px; left:-10px; bottom:-10px; } #column .menuArea .head h4 b { font-size:16px; } } @media screen and (max-width: 768px) { #column .menuArea .inner { padding:60px 7%; } } @media screen and (max-width: 738px) { #column .menuArea { margin-top:-25px; } /* .columnBox */ #column .menuBox { margin-top:25px; } #column .menuArea .inner { padding:45px 7.5% 45px; } #column .menuBox .imgArea { float:none; width:100%; } #column .menuBox .imgArea_purple:after, #column .menuBox .imgArea_pink:after { top:-10px; right:-10px; left:-10px; bottom:-10px;} /* --- .txtArea --- */ #column .menuBox .txtArea { float:none; width:100%; margin-top:35px; } #column .menuArea .head span.No { font-size:16px;} #column .menuArea .head h4 { font-size:14px;} #column .menuArea .head h4 b { font-size:16px; } /* --- .catchArea --- */ #column .menuBox .catchArea { margin-top:15px;} #column .menuBox .catchArea ul li { padding-left:1.5em; } /* --- .materialArea --- */ .materialArea { } /* h5 */ #column .menuArea h5 {font-size:15px; margin-top:20px; } /* --- table.tableMaterial --- */ table.tableMaterial { font-size:13px;} /* --- ul.recipe --- */ #column ul.recipe { list-style:none; margin:10px 0 0; font-size:0; } #column ul.recipe li { padding:15px 5% 15px 40px;font-size: 12px; font-weight: normal; line-height: 1.9;} #column ul.recipe li:before { top:12px; left:15px; width:25px; font-size:20px; } } @media screen and (max-width: 414px) { #column .menuArea .inner { padding:25px 7.5% 45px; } #column .menuArea .head h4 { font-size:13px;} #column .menuArea .head h4 b { font-size:15px; } table.tableMaterial { font-size:11px;} table.tableMaterial th {padding:5px 0;} table.tableMaterial td {padding:5px 0;} } /* ======== .menuMore ======== */ #column .menuMore { margin-top:10px; padding:55px 7.5% 0;background:#fefefe; text-align:center; overflow:hidden; } #column .linkArea { margin-top:15px; } #column .menuMore ul { font-size:0; list-style:none; margin:40px -9% 0; } #column .menuMore ul li { display:inline-block; width:20%; margin:0; } @media screen and (max-width: 768px) { #column .menuMore { padding:50px 7.5% 0; } } @media screen and (max-width: 738px) { #column .menuMore { margin-top:25px; padding:45px 7.5% 0;} #column .linkArea { margin-top:15px; } #column .menuMore ul { margin:35px -9% 0; } } @media screen and (max-width: 414px) { #column .menuMore { margin-top:25px; padding:40px 7.5% 0; text-align:left;} #column .menuMore br { display:none; } #column .menuMore ul { margin:35px -9% 0; } } /* ----------------------------------------------------------- #champaign ----------------------------------------------------------- */ #champaign { padding:90px 5%; background: url("../images/bgIntroIllust.jpg") top center repeat; z-index:1; position:relative;} @media screen and (max-width: 768px) { #champaign { padding:80px 5%; background-size:350px 263px } } @media screen and (max-width: 738px) { #champaign { padding:70px 5%; } } @media screen and (max-width: 414px) { #champaign { padding:60px 5%; } } /* ======== .inner ======== */ #champaign .inner { margin:0 auto; position:relative; z-index:3; background:url("../images/bgAbout.png") repeat #fff4ff; background:rgba(255,255,255,0.8)} #champaign .inner:before { position:absolute; top:10px; left:20px; right:20px; bottom:10px; content:""; border-top:#a276c9 double; border-bottom:#a276c9 double; z-index:1; } #champaign .inner:after { position:absolute; top:20px; left:10px; right:10px; bottom:20px; content:""; border-left:#a276c9 double; border-right:#a276c9 double; z-index:1; } /* --- .catchArea --- */ #champaign .inner .catchArea { padding:55px 7.5% 45px; position:relative; z-index:2; } #champaign .inner .catchArea:before { position:absolute; bottom:0; left:20px; right:20px; height:0; content:""; border-top:#a276c9 double; z-index:-1; } #champaign .inner .catchArea:after { position:absolute; top:20px; left:20px; bottom:10px; right:20px; content:""; background: url("../images/pattern_date.png") repeat #fefefe; z-index:-2; } /* h3 */ #champaign .inner h3.jpL { color:#411f70; font-size:25px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:bold; line-height:1.8; letter-spacing:1.5px; position:relative; z-index:3; } #champaign .inner h3.jpS { color:#e803a4;font-size:16px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.8; letter-spacing:1.5px; position:relative; z-index:3; } @media screen and (max-width: 768px) { #champaign .inner:before { top:5px; left:15px; right:15px; bottom:5px; } #champaign .inner:after { top:15px; left:5px; right:5px; bottom:15px; } #champaign .inner .catchArea:after { background-size:75px 75px; } #champaign .inner h3.jpL { font-size:20px; } #champaign .inner h3.jpS { font-size:15px;} } @media screen and (max-width: 738px) { #champaign .inner .catchArea { padding:50px 5% 40px; } #champaign .inner h3.jpL { font-size:18px; } } @media screen and (max-width: 414px) { #champaign .inner .catchArea { padding:45px 5% 35px; } #champaign .inner h3.jpL { font-size:17px; } #champaign .inner h3.jpS { font-size:14px;} } /* ======== .prizeArea ======== */ #champaign .prizeArea {padding:55px 7.5% 75px; margin:-30px 0 0; position:relative; z-index:4;} /* --- .prizeBox --- */ #champaign .prizeBox { display:block; padding:30px 0; border-bottom:#a276c9 1px dashed; } /* --- .imgArea --- */ #champaign .prizeBox .imgArea { float:left; width:45%; position:relative; z-index:2; } #champaign .prizeBox .imgArea:after { position:absolute; top:15px; right:15px; left:-15px; bottom:-15px; content:""; z-index:-1; opacity:0.7; background: url("../images/stripe_pink_purple.png") repeat;} #champaign .prizeBox .imgArea img {border:#ebdbfd 1px solid; } /* --- .txtArea --- */ #champaign .prizeBox .txtArea { float:right; width:50%; text-align:left; } #champaign .prizeBox .head { margin:0; padding:15px 0; border-top:#a276c9 double; border-bottom:#a276c9 double; position:relative; z-index:2; margin-bottom:15px; } #champaign .prizeBox h5 { display:block; width: 80px; padding:0; color:#fefefe; background:#a276c9; border-top:#a276c9 2px solid; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:bold;text-align: center; font-size:16px; letter-spacing:2px; line-height:30px; position:relative; z-index:2; margin-bottom:10px; } #champaign .prizeBox h5 span { font-size:0.85em; vertical-align:0; } #champaign .prizeBox .txtArea h4 { color:#411f70; font-size:18px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.8; letter-spacing:1px; } #champaign .prizeBox .txtArea p.No { color:#e803a4; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";font-weight:bold;} #champaign .prizeBox .txtArea p { font-size:14px; line-height:1.9;} @media screen and (max-width: 1024px) { #champaign .prizeBox .imgArea:after { top:10px; right:10px; left:-10px; bottom:-10px;} #champaign .prizeBox .txtArea h4 { font-size:16px;} } @media screen and (max-width: 768px) { #champaign .prizeArea {padding:45px 7.5%; margin:-45px 0 0;} #champaign .prizeBox { padding:45px 0 35px; } #champaign .prizeBox .imgArea { float:none; width:100%; } #champaign .prizeBox .imgArea:after { top:-10px; right:-10px; left:-10px; bottom:-10px;} #champaign .prizeBox .txtArea { float:none; width:100%; margin-top:35px; text-align:center; } #champaign .prizeBox .head { text-align:center; } #champaign .prizeBox h5 { margin:0 auto 10px; width: 70px; line-height:25px;} #champaign .prizeBox .txtArea p { font-size:13px; line-height:1.9;} } @media screen and (max-width: 738px) { #champaign .prizeBox .txtArea { text-align:left; } #champaign .prizeBox .head { text-align:center; } } /* ======== .innerHpy ======== */ #champaign .innerHpy { margin:15px auto 0; padding:55px 7.5%; position:relative; z-index:1; background:#fefefe; background:rgba(255,255,255,0.8)} #champaign .innerHpy h4 { color:#e803a4; font-size:18px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight:normal; line-height:1.8; letter-spacing:1px; margin-bottom:15px; } @media screen and (max-width: 950px) { #champaign .innerHpy { text-align:left; } #champaign .innerHpy h4 { text-align:center; } } @media screen and (max-width: 768px) { #champaign .innerHpy { padding:50px 7.5%;} } @media screen and (max-width: 738px) { #champaign .innerHpy { padding:40px 7.5% 35px;} #champaign .innerHpy h4 { font-size:16px; margin-bottom:10px; } } @media screen and (max-width: 414px) { #champaign .innerHpy { padding:35px 7.5% 40px;} } /* ----------------------------------------------------------- #sns ----------------------------------------------------------- */ #sns { padding:90px 5% 120px; position:relative; z-index:0; z-index:1; } #sns:before {position:absolute; top:0; right:0; bottom:0; left:0; content:"";background:url("../images/bg2.jpg") no-repeat left top; background-size:cover; background-attachment:fixed; z-index:-1; } #sns:after {position:absolute; top:0; right:0; bottom:0; left:0; content:"";background:url("../images/noise.png") repeat rgba(0,0,0,0.3); z-index:1; } /* --- .headlineSns --- */ .headlineSns { margin:0 auto 35px; text-align:center; position:relative; z-index:2; } .headlineSns h2.en { color:#fefefe; font-size:35px; font-family: 'Josefin Sans', sans-serif; font-weight:700;letter-spacing:2px; line-height:1; } @media screen and (max-width: 1024px) { #sns:before {background-attachment: scroll;} } @media screen and (max-width: 768px) { #sns { padding:80px 5% 100px; } .headlineSns { margin:0 auto 30px;} .headlineSns h2.en { font-size:30px; } } @media screen and (max-width: 738px) { #sns { padding:70px 5% 90px; } #sns:before { background:url("../images/bg2Sp.jpg") no-repeat left top; background-size:cover; } } /* --- .snsArea --- */ #sns .snsArea { position:relative; z-index:2;} /* --- .snsBtnArea --- */ #sns ul.snsBtnArea { margin:0 -1.5% 0; font-size:0; text-align:center;} #sns ul.snsBtnArea li { display:inline-block; font-size: 13px; font-weight: normal; font-style: normal; letter-spacing: 1px; margin: 15px 1.5% 0; width:30.333%; max-width:300px; min-width:240px; } #sns ul.snsBtnArea li a { display:block; margin:0 auto; padding: 0 0 0 10px; color:#fefefe; height:60px; line-height:60px; position:relative;-webkit-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px; } #sns ul.snsBtnArea li a:before { position: absolute; top: 0; left: 15px; bottom: 0; display: block; font-size: 18px; font-family: 'themify'; font-weight: normal; line-height: 60px;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sns ul.snsBtnArea li a.twitterBtn { background: #2ca7e0; } #sns ul.snsBtnArea li a.twitterBtn:before { content: "\e74b"; } #sns ul.snsBtnArea li a.facebookBtn { background: #3c599f; } #sns ul.snsBtnArea li a.facebookBtn:before { content: "\e741"; } #sns ul.snsBtnArea li a.lineBtn { background: #00b500; } #sns ul.snsBtnArea li a.lineBtn:before { left: 15px; display: block; content: ""; background:url("../images/logoLine.png") left center no-repeat; width:25px; background-size:25px 25px;} #sns ul.snsBtnArea li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #sns ul.snsBtnArea li a:hover:before {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);} #sns ul.snsBtnArea li.line { display:none; } @media screen and (max-width: 768px) { #sns .snsArea { margin-top:30px;} #sns ul.snsBtnArea li { width:47%; } #sns ul.snsBtnArea li.line { display:inline-block; } #sns ul.snsBtnArea li a { height:50px; line-height:50px; -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; } #sns ul.snsBtnArea li a:before { line-height: 50px;} #sns ul.snsBtnArea li a:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #sns ul.snsBtnArea li a:hover:before {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} } @media screen and (max-width: 738px) { #sns ul.snsBtnArea { margin:10px -1.5% 0; } #sns ul.snsBtnArea li { min-width:0; width:47%;} #sns .snsArea h4 {font-size:20px;} } @media screen and (max-width: 414px) { #sns ul.snsBtnArea { margin:10px 0 0; text-align: center; } #sns ul.snsBtnArea li { display:block; font-size: 13px; margin: 10px auto 0; width:100%; } #sns ul.snsBtnArea li.line { display:block; } #sns ul.snsBtnArea li a { margin:0 auto; padding: 0 0 0 10px; width:250px; min-width:250px; max-width:100%; } } /* ----------------------------------------------------------- .linkArea ----------------------------------------------------------- */ .linkArea { margin-top:40px; text-align:center; } /* --- a.btn --- */ .linkArea a.btn { display:block; margin:0 auto; width:300px; max-width:100%; height:60px; color:#fefefe; background:#FF6699; border:#FF6699 1px solid; font-size:15px; letter-spacing:1px; line-height:60px; position:relative;-webkit-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px; z-index:1; } .linkArea a.btn:before { position:absolute; top:0; right:15px; bottom:0; line-height:60px; font-size:14px; font-family: 'themify'; content: "\e649"; font-weight:normal; } .linkArea a.btn:after { position:absolute; top:0; left:0; bottom:-3px; right:0; content:""; z-index:-1;border-bottom:#c9068f 2px solid; -webkit-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} .linkArea a.btn-purple { color:#fefefe; background:#8343ba; border:#6e389c 1px solid;} .linkArea a.btn-purple-border { color:#8343ba; background:none; border:#6e389c 1px solid;} .linkArea a.btn-purple:after, .linkArea a.btn-purple-border:after { border-bottom:#6e389c 2px solid;} .linkArea a.scrolldown:before { content: "\e62a";} .linkArea a.youtube:before { right:auto; left:15px; font-size:25px; content: "\e728";} .linkArea a.btn-large { width:350px; max-width:100%; height:70px; font-size:16px; line-height:70px; } .linkArea a.btn-large:before { line-height:70px; } .linkArea a.btn:hover {background:#e803a4; border:#e803a4 1px solid;} .linkArea a.btn:hover:after { border-bottom:#e803a4 2px solid;} .linkArea a.btn-purple:hover, .linkArea a.btn-purple-border:hover { color:#fefefe; background:#411f70; border:#411f70 1px solid;} .linkArea a.btn-purple:hover:after, .linkArea a.btn-purple-border:hover:after { border-bottom:#411f70 2px solid;} @media screen and (max-width: 768px) { .linkArea a.btn { width:270px; } .linkArea a.btn:hover { color:#fefefe; background:#FF6699; border:#F69 1px solid; } .linkArea a.btn:hover:after { border-bottom:#c9068f 2px solid;} .linkArea a.btn-purple:hover { color:#fefefe; background:#8343ba; border:#6e389c 1px solid;} .linkArea a.btn-purple-border:hover { color:#8343ba; background:none; border:#6e389c 1px solid;} .linkArea a.btn-purple:hover:after, .linkArea a.btn-purple-border:hover:after { border-bottom:#6e389c 2px solid;} } @media screen and (max-width: 738px) { .linkArea { margin-top:35px } .linkArea a.btn { width:270px; max-width:100%;height:55px; line-height:55px; font-size:14px;} .linkArea a.btn:before { line-height:55px; } .linkArea a.btn-large { max-width:100%; height:60px; font-size:15px; line-height:60px; } .linkArea a.btn-large:before { line-height:60px; } .linkArea { margin-top:30px } } /* ----------------------------------------------------------- footer ----------------------------------------------------------- */ footer { padding:30px 5% 50px;background:#fbcfe3; position:relative; z-index:2; text-align:center; z-index:2;} footer:after { display: block; position: absolute; top: -35px; left: 0; right: 0; height: 37px; content:""; z-index: -1; background:url("../images/bgFooter.png") repeat left top;} /* --- p.copy --- */ footer p.copy { color:#541b86;font-family: 'Josefin Sans', sans-serif; font-weight:600; font-size:11px; letter-spacing:1px; position:relative; z-index:3;vertical-align:0; } footer p.copy span { font-weight:400; } /* --- .logoArea --- */ footer .logoArea { width:60px; display:block; text-align:center; position:relative; margin:0 auto 15px;} footer .logoArea h1 a { width:60px; height: 59px; background: url("../images/logoCPB_1.png") center center no-repeat; background-size:60px 59px; display: block; position: relative; overflow: hidden; position: relative; text-indent:-999px; z-index:1003; } footer .logoArea h1 a:hover{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);} @media screen and (max-width: 768px) { footer:after { top: -19px; height: 19px; background-size:100px 19px;} } @media screen and (max-width: 738px) { footer .logoArea h1{ width:50px; height: 50px; background-size:50px 50px; } } /* ---------------------------------------------------------- #scrollUp ---------------------------------------------------------- */ #scrollUp { position: fixed; bottom: 15px; right: 15px; z-index: 1300; } #scrollUp a { width: 60px; height: 60px; display: block; color: #fefefe; background: #411f70; text-align: center; z-index: 11; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #scrollUp a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; font-size: 20px; font-family: 'themify'; content: "\e627"; font-weight: normal; line-height: 60px; } #scrollUp a:hover { -webkit-transform: translate(0px, -10px); -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); transform: translate(0px, -10px); } @media only screen and (max-width: 414px) { #scrollUp a { width: 50px; height: 50px;} #scrollUp a:before { font-size: 15px; line-height: 50px; } } /* ---------------------------------------------------------- アニメーション ---------------------------------------------------------- */ /* --- bgcolor --- */ @-webkit-keyframes bgcolor{0%{background-color:#967ae1}100%{background-color:#e6dff8}}@-moz-keyframes bgcolor{0%{background-color:#967ae1}100%{background-color:#e6dff8}}@-ms-keyframes bgcolor{0%{background-color:#967ae1}100%{background-color:#e6dff8}}@-o-keyframes move-bg{0%{background-color:#967ae1}100%{background-color:#e6dff8}}@keyframes bgcolor{0%{background-color:#967ae1}100%{background-color:#e6dff8}} /* --- bg-pattern --- */ @-webkit-keyframes bg-pattern{0%{opacity:1}100%{opacity:.1}}@-moz-keyframes bg-pattern{0%{opacity:1}100%{opacity:.1}}@-ms-keyframes bg-pattern{0%{opacity:1}100%{opacity:.1}}@-o-keyframes move-bg{0%{opacity:1}100%{opacity:.1}}@keyframes bg-pattern{0%{opacity:1}100%{opacity:.1}} /* --- bg-width --- */ @-webkit-keyframes bg-width{0%{width:0}100%{width:100%}}@-moz-keyframes bg-width{0%{width:0}100%{width:100%}}@-ms-keyframes bg-width{0%{width:0}100%{width:100%}}@-o-keyframes move-bg{0%{width:0}100%{width:100%}}@keyframes bg-width{0%{width:0}100%{width:100%}} /* ----- move ----- */ @-webkit-keyframes move-bg{0%{background-position:0 0}100%{background-position:0 -500px}}@-moz-keyframes move-bg{0%{background-position:0 0}100%{background-position:0 -500px}}@-ms-keyframes move-bg{0%{background-position:0 0}100%{background-position:0 -500px}}@-o-keyframes move-bg{0%{background-position:0 0}100%{background-position:0 -500px}}@keyframes move-bg{0%{background-position:0 0}100%{background-position:0 -500px}} /* ----- scroll-next ----- */ @-webkit-keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}@-moz-keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}@-ms-keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}@keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}} /* ----- spin-left ----- */ @-webkit-keyframes spin-left{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spin-left{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(-360deg)}}@-ms-keyframes spin-left{0%{-ms-transform:rotate(0)}100%{-ms-transform:rotate(-360deg)}}@-o-keyframes spin-left{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(-360deg)}}@keyframes spin-left{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}} /* ----- spin-right ----- */ @-webkit-keyframes spin-right{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin-right{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-ms-keyframes spin-right{0%{-ms-transform:rotate(0)}100%{-ms-transform:rotate(360deg)}}@-o-keyframes spin-right{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes spin-right{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} /*! * SlickNav Responsive Mobile Menu v1.0.6 * (c) 2015 Josh Cope * licensed under MIT */ .slicknav_menu,.slicknav_menu *{box-sizing:border-box}#menu{display:none}.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu{padding:0;margin:0;position:fixed;top:0;width:100%;height:60px;z-index:1501;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);-moz-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}.slicknav_btn{width:50px;height:50px;display:block;margin:5px;text-decoration:none;border:1px solid #541b86;float:right;position:relative;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%}.slicknav_btn:after,.slicknav_btn:before{position:absolute;right:12px;left:12px;display:block;content:"";border-top:#541b86 1px solid;z-index:2}.slicknav_btn:before{top:18px;bottom:17px;border-bottom:#541b86 1px solid}.slicknav_btn:after{top:24px;height:0}.slicknav_menu .slicknav_menutxt{display:none;line-height:1.188em;float:left;color:#fff;font-weight:700}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu:after,.slicknav_menu:before{content:" ";display:table}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block;list-style:none;overflow:hidden;padding:0;background:#f4effc}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav li{position:relative}.slicknav_nav li:after{position:absolute;bottom:0;left:0;right:0;height:0;content:"";border-bottom:#ebdbfd 1px dotted}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block;text-decoration:none;padding:20px 15px;text-align:center}.slicknav_nav .en{color:#d50698;font-size:11px;font-family:'Josefin Sans',sans-serif;font-weight:700;letter-spacing:2px;line-height:1}.slicknav_nav .jp{color:#541b86;font-size:14px;font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝";font-weight:400;letter-spacing:2px;line-height:1;margin-top:5px}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{font-size:16px}.slicknav_nav{list-style:none;overflow:hidden;padding:0;background:#f7f3fd;clear:both;margin:0}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px}.slicknav_menu,ul#menu{display:none}@media screen and (max-width:768px){#headerSp{display:block}.js #menu{display:none}.js .slicknav_menu,ul#menu{display:block}}@media screen and (max-width:738px){.slicknav_menu{height:50px}.slicknav_btn{width:40px;height:40px}.slicknav_btn:before{position:absolute;top:14px;right:10px;left:10px;bottom:13px}.slicknav_btn:after{position:absolute;top:19px;right:10px;left:10px;height:0}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:15px}.slicknav_nav .jp{font-size:12px}} /* * Boxer v3.3.0 - 2015-04-04 * A jQuery plugin for displaying images, videos or content in a modal overlay. Part of the Formstone Library. * http://classic.formstone.it/boxer/ * * Copyright 2015 Ben Plum; MIT Licensed */ .boxer-lock{overflow:hidden!important}#boxer-overlay{width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:url("../images/pattern_movie.png") center center #c3a6ef;opacity:0;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.boxer-open #boxer-overlay{opacity:.8}#boxer{width:300px;height:300px;position:absolute;right:0;left:0;z-index:10001;background:#fefefe;border-radius:3px;opacity:0;margin:0 auto;padding:10px}#boxer *{-webkit-transition:none;transition:none}#boxer,#boxer *{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}#boxer,#boxer *,#boxer :after,#boxer :before{box-sizing:border-box}#boxer.fixed{position:fixed;top:0;bottom:0;margin:auto}#boxer.inline{padding:30px}#boxer.animating{-webkit-transition:height .25s ease,width .25s ease,opacity .25s ease,top .25s ease;transition:height .25s ease,width .25s ease,opacity .25s ease,top .25s ease}#boxer.animating .boxer-container{-webkit-transition:opacity .25s ease .25s;transition:opacity .25s ease .25s}.boxer-open #boxer{opacity:1}#boxer.loading .boxer-container{opacity:0;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}#boxer .boxer-close{width:30px;height:30px;position:absolute;top:-35px;right:-35px;z-index:105;cursor:pointer;display:block;overflow:hidden;padding:0;text-indent:200%;white-space:nowrap}#boxer .boxer-close:before{position:absolute;top:0;right:0;bottom:0;left:0;color:#fefefe;font-family:themify;content:"\e646";display:block;font-size:30px;font-weight:400;line-height:30px;margin:auto;text-align:center;text-indent:0;-webkit-transition:color .15s linear;transition:color .15s linear}#boxer .boxer-control:before,#boxer .boxer-loading:after,#boxer .boxer-loading:before{position:absolute;right:0;left:0;content:'';top:0;bottom:0}.no-opacity #boxer .boxer-close{text-indent:-999px}#boxer .boxer-loading{width:50px;height:50px;position:absolute;top:0;right:0;bottom:0;left:0;z-index:105;display:block;margin:auto;opacity:0;-webkit-transition:opacity .25s linear;transition:opacity .25s linear}#boxer .boxer-loading:after,#boxer .boxer-loading:before{width:100%;height:100%;border-radius:110%;display:block}#boxer .boxer-loading:after{border-top:1px solid #fefefe;border-right:1px solid #F69;border-bottom:1px solid #fefefe;border-left:1px solid #F69;-webkit-animation:spin-right 3s linear infinite;-moz-animation:spin-right 3s linear infinite;-ms-animation:spin-right 3s linear infinite;-o-animation:spin-right 3s linear infinite;animation:spin-right 3s linear infinite}#boxer.loading .boxer-loading{opacity:1}@-webkit-keyframes boxer-loading-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes boxer-loading-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}#boxer .boxer-container{width:100%;height:100%;position:relative;z-index:103;background:#fefefe;overflow:hidden}#boxer .boxer-content{width:100%;background:#c3a6ef;opacity:1;overflow:hidden;padding:0}#boxer.iframe .boxer-content,#boxer.inline .boxer-content{width:auto}#boxer .boxer-iframe,#boxer .boxer-video{width:100%;height:100%}#boxer .boxer-image{float:left}#boxer .boxer-iframe{border:none;float:left;overflow:auto}#boxer .boxer-meta{clear:both;padding:0}#boxer .boxer-control{width:40px;height:40px;position:absolute;top:0;background:#fff;border-radius:100%;box-shadow:0 0 5px rgba(0,0,0,.25);cursor:pointer;margin-right:auto;margin-left:auto;opacity:1;overflow:hidden;text-indent:200%;-webkit-transition:opacity .15s linear;transition:opacity .15s linear;white-space:nowrap;display:none}#boxer .boxer-control.disabled,.no-touch #boxer .boxer-control{opacity:0}#boxer .boxer-control:before{width:0;height:0;margin:auto}#boxer .boxer-control.previous{left:20px}#boxer .boxer-control.previous:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:10.4px solid #333;margin-left:14px}#boxer .boxer-control.next{right:20px}#boxer .boxer-control.next:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:10.4px solid #333;margin-right:14px}.no-opacity #boxer .boxer-control{text-indent:-999px}.no-touch #boxer:hover .boxer-control{opacity:1}.no-touch #boxer:hover .boxer-control.disabled{opacity:0;cursor:default!important}#boxer .boxer-position{color:#999;font-size:12px;margin:0;padding:15px 15px 0}#boxer .boxer-caption p{color:#666;font-size:14px;margin:0;padding:15px}#boxer .boxer-caption.gallery p{padding-top:0}#boxer .boxer-error{width:250px}#boxer .boxer-error p{color:#900;font-size:14px;margin:0;padding:25px;text-align:center;text-transform:uppercase}#boxer.mobile{width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;background:#c3a6ef;border-radius:0;padding:40px 0 0}#boxer.mobile .boxer-close,#boxer.mobile .boxer-close:hover{height:50px;width:50px;top:0;right:0;background:0 0;border-radius:0}#boxer.mobile .boxer-close:before,#boxer.mobile .boxer-close:hover:before{color:#fefefe;font-size:20px;font-weight:400;line-height:50px}#boxer.mobile .boxer-loading:before{border-color:rgba(153,153,153,.25)}#boxer.mobile .boxer-loading:after{border-top-color:#999}#boxer.mobile .boxer-container{background:#c3a6ef}#boxer.mobile .boxer-content{background-color:#111 background:#c3a6ef}#boxer.mobile .boxer-control{width:50px;height:100%;background:#111;border-radius:0;box-shadow:none;opacity:1}#boxer.mobile .boxer-control.previous{display:none;left:0}#boxer.mobile .boxer-control.previous:before{border-right-color:#eee;margin-left:19px}#boxer.mobile .boxer-control.next{display:none;right:0}#boxer.mobile .boxer-control.next:before{border-left-color:#eee;margin-right:19px}.no-touch #boxer.mobile .boxer-control,.no-touch #boxer.mobile:hover .boxer-control{opacity:1}.no-touch #boxer.mobile .boxer-control.disabled,.no-touch #boxer.mobile:hover .boxer-control.disabled{opacity:0;cursor:default!important}#boxer.mobile .boxer-meta{width:100%;position:absolute;right:0;bottom:0;left:0;background:#c3a6ef;padding:15px 65px}#boxer.mobile .boxer-position{color:#999;font-size:12px;margin:0;padding:0 15px 0 0}#boxer.mobile .boxer-caption p{color:#eee;font-size:14px;margin:0;padding:0}#boxer.mobile .boxer-image{-webkit-transition:none!important;transition:none!important;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}#boxer.mobile.animated .boxer-image{-webkit-transition:-webkit-transform .25s ease-out!important;transition:transform .25s ease-out!important}#boxer.mobile.iframe .boxer-content,#boxer.mobile.inline .boxer-content{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}