@charset "utf-8";
@import url("parts_header.css");
@import url("parts_nav.css");
@import url("parts_footer.css");
@import url("parts_contents.css");
@import url("parts_parts.css");
@import url("parts_col.css");
@import url("parts_text.css");
.wp_pagedata{
 position:absolute;
 top: 0;left: 10px;
 }
.wp_pagedata li{
 display:inline;
 color:#f30;
 font-weight: bold;
 }
.wp_pagedata li:after{
 display:inline;
 content:' | ';
 color:#ccc;
 }
/* =========================================================
 1.0 - Reset 
========================================================= */
body, div,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td,
address, caption {margin: 0;padding: 0;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset, img {border: 0;vertical-align: top;}
address, caption, cite, code, dfn, em, /*strong,*/ th, var {font-style: normal;font-weight: normal;}
ul,ol {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}
hr {display: none;margin: 0;padding: 0;}
/* =========================================================
 2.0 - HTML 
========================================================= */
html {
 font-size: 62.5%;
 overflow-x: hidden;
 }
body{
 position: relative;
 font-family: Roboto, 'Noto Sans JP', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', Osaka, 'MS PGothic', sans-serif;
 font-weight: 400;
 font-size: 1.5rem;
 line-height: 2;
 color: #000;
 -webkit-text-size-adjust: 100%;
 }
/* IE10-11 */
_:-ms-input-placeholder, :root body{
 font-family: 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif !important;
 font-weight: 500;
 }
img{
 width: 100%;
 height: auto;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 image-rendering: -webkit-optimize-contrast;
 }
table{
 width: 100%;
 margin-bottom: 30px;
 background-color: #fff;
	}
th,td{
 padding: 5px 10px;
 border: solid 1px #ccc;
 box-sizing:border-box;
 font-size: 1.4rem;
	}
th{
 /*width: auto;*/
 text-align:center;
 font-weight: bold;
 /*color: #fff;
 background-color: #d7000f;*/
	}
td li{
 text-align:left;
 text-indent: -1em;
 padding-left: 1em;
	}
 
a{
 color: #000;
 word-break: break-all;
 }
a.txtLink{
 padding-left: 15px;
 background:url(../img/icon_ar_nav.png) left center no-repeat;
 background-size: 9px auto;
 }
.txtLink a[target="_blank"],
.list_link a[target="_blank"],
.blank{
 padding-right: 17px;
 background: url(../img/icon_blank.png) right top no-repeat;
 background-size: 12px auto;
 }
.blank_w{
 padding-right: 17px;
 background: url(../img/icon_blank_w.png) right top no-repeat;
 background-size: 12px auto;
 }
@media print, screen and (min-width: 769px) {
 body {
 font-size: 1.6rem;
 line-height: 2.2;
 }
 
 a:hover{
 opacity: .7;
 /*text-decoration: underline;*/
 }
 
 .linkEx a:hover{
 opacity: 1;
 } 
 }
/* =========================================================
 2.1 - Form reset
========================================================= */
/* 	インプット テキスト系
---------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"]{
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 padding: 0.7em 1.2em; 
 border: 1px solid #CCC;
 border-radius: 5px;
 box-sizing: border-box;
 color: #000;
 font-family: inherit;
 font-size: 1em;
 background-color: #FFF;
 background-image: none;
 }
/* スピンボタン消去 
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
 }
input[type="number"] {
 -moz-appearance:textfield;
 }*/
input[type="number"]{
 padding: 0.4em 0 0.4em 0.8em; 
 }
@media print, screen and (min-width:769px){
 }
/* 	テキストエリア
---------------------------------------------------------- */
textarea {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 100px;
 padding: 0.6em 1.2em; 
 border: 1px solid #CCC;
 border-radius: 5px;
 box-sizing: border-box;
 color: inherit;
 font-family: inherit;
 font-size: 1em;
 background-color: #FFF;
 background-image: none;
 }
/*textarea::placeholder {
 color: #red;
 }*/
@media print, screen and (min-width:769px){
 }
/* 	placeholder
---------------------------------------------------------- */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {/* Webkit */
color: #8f8f95;
opacity: 1;
 }
input:-moz-placeholder,
textarea:-moz-placeholder {/* Firefox 18 Before */
color: #8f8f95;
 }
input::-moz-placeholder,
textarea::-moz-placeholder {/* Firefox 19 After */
color: #8f8f95;
opacity: 1;
 }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {/* IE 10 After */
color: #8f8f95;
 }
/* 	placeholder 非表示
---------------------------------------------------------- */
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { color: transparent; }
@media print, screen and (min-width:769px){
 }
/* 	インプット ラジオボタン
---------------------------------------------------------- */
.radioBtn,
input[type="radio"] {
 display: none;
 }
.radioBtn + span,
input[type="radio"] + span {
 position: relative;
 display: inline-block;
 margin: 0 0.2em 0;
 padding: 0 0 0 1.2em;
 cursor: pointer;
 }
.radioBtn + span::before,
input[type="radio"] + span::before {
 position: absolute;
 top: 50%;
 left: 0;
 display: block;
 width: 16px;
 height: 16px;
 content: "";
 border: 1px solid #CCC;
 border-radius: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 background: #FFF;
 }
.radioBtn + span::after,
input[type="radio"] + span::after {
 position: absolute;
 top: 50%;
 left: 4px;
 width: 8px;
 height: 8px;
 content: "";
 border: 1px solid transparent;
 border-radius: 50%;
 opacity: 0;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 transition: all 0.3s ease 0s;
 background: #CCC;
 }
.radioBtn:checked + span::after,
input[type="radio"]:checked + span::after {
 opacity: 1;
 }
@media print, screen and (min-width:769px){
 }
/* 	インプット チェックボックス
---------------------------------------------------------- */
.checkBox,
input[type="checkbox"] {
 display: none;
 }
.checkBox + span,
input[type="checkbox"] + span {
 position: relative;
 display: inline-block;
 margin: 0 0.2em 0;
 padding: 0 0 0 1.2em;
 cursor: pointer;
 }
.checkBox + span::before,
input[type="checkbox"] + span::before {
 position: absolute;
 top: 50%;
 left: 0;
 display: block;
 width: 1em;
 height: 1em;
 content: "";
 border: 1px solid #CCC;
 border-radius: 2px;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 background: #FFF;
 }
.checkBox + span::after,
input[type="checkbox"] + span::after {
 position: absolute;
 top: 55%;
 left: 0.15em;
 display: block;
 width: 0.6em;
 height: 0.4em;
 content: "";
 margin-top: -0.2em;
 border-bottom: 2px solid #CCC;
 border-left: 2px solid #CCC;
 opacity: 0;
 transform: translateY(-50%) rotate(-45deg);
 transition: all 0.3s ease 0s;
 -webkit-transform: translateY(-50%) rotate(-45deg);
 }
.checkBox:checked + span::after,
input[type="checkbox"]:checked + span::after {
 opacity: 1;
 }
@media print, screen and (min-width:769px){
 }
/* 	セレクトメニュー
---------------------------------------------------------- */
select {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 padding: 0.4em 0.8em;
 border: 1px solid #CCC;
 border-radius: 0;
 color: inherit;
 cursor: pointer;
 font-family: inherit;
 font-size: 1em;
 background: transparent url(../img/form-css-arrow.png) no-repeat center right 13px/16px 16px;
 background-color: #FFF;
 }
select::-ms-expand {
 display: none;
 }
@media print, screen and (min-width:769px){
 }
/* 	インプット ボタン系
---------------------------------------------------------- */
.submitBtn,
input[type="submit"],
.clearBtn,
input[type="reset"],
.buttonBtn,
input[type="button"] {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 width: 200px;
 height: 50px;
 margin: 0 0 1em;
 padding: 0.6em 2em;
 border: none;
 border-radius: 0;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 font-size: 1.5rem;
 font-weight: 500;
 text-decoration: none;
 transition: all 0.3s ease 0s;
 background-color: #ccc;
 background-image: none; 
 }
.submitBtn:hover,
.submitBtn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.clearBtn:hover,
.clearBtn:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
.buttonBtn:hover,
.buttonBtn:focus,
input[type="button"]:hover,
input[type="button"]:focus {
 outline: none;
 background-color: #eaa964;
 }
.submitBtn::-moz-foucus-inner,
input[type="submit"]::-moz-foucus-inner,
.clearBtn::-moz-foucus-inner,
input[type="reset"]::-moz-foucus-inner,
.buttonBtn::-moz-foucus-inner,
input[type="button"]::-moz-foucus-inner {
 border: none;
 padding: 0;
 }
@media print, screen and (min-width:769px){
 .submitBtn,
 input[type="submit"],
 .clearBtn,
 input[type="reset"],
 .buttonBtn,
 input[type="button"] {
 width: 250px;
 height: 60px;
 font-size: 1.6rem; 
 font-weight: normal;
 }
 }
/* 	インプット ボタン(画像)系
---------------------------------------------------------- */
.imgBtn,
input[type="image"] {
 
 }
@media print, screen and (min-width:769px){
 }
/* 	focus まとめ
---------------------------------------------------------- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
 border: 1px solid #999;
 box-shadow: none;
 outline: none;
 }
@media print, screen and (min-width:768px){
 }
/* =========================================================
 3.0 - Class 
========================================================= */
/* Block
---------------------------------------------------------- */
.cf::after,
.clearfix::after{
 content: "";
 display: block;
 clear: both;
 }
.only_sp{display: block !important;}
.only_pc{display: none !important;}
.only_sp_il{display: inline !important;}
.only_pc_il{display: none !important;}
.lt_375{display: none !important;}
@media print, screen and (max-width: 374px) {
 .lt_375{display: block !important;}
 }
@media print, screen and (min-width: 769px) {
 .only_sp{display: none !important;}
 .only_pc{display: block !important;}
 .only_sp_il{display: none !important;}
 .only_pc_il{display: inline !important;}
 .lt_375{display: none !important;}
 .leftBox{
 float: left;
 }
 .rightBox{
 float: right;
 } 
 
 }
/* Margin
---------------------------------------------------------- */
.m0 {margin: 0 !important;} .m05{margin: 5px !important;} .m10{margin: 10px !important;} .m20{margin: 20px !important;} .m30{margin: 30px !important;} .m40{margin: 40px !important;} .m50{margin: 50px !important;}
.mt0{margin-top: 0 !important;} .mt05{margin-top: 5px !important;} .mt10{margin-top: 10px !important;} .mt20{margin-top: 20px;} .mt30{margin-top: 30px !important;} .mt40{margin-top: 40px !important;} .mt50{margin-top: 50px !important;}
.mr0{margin-right: 0 !important;}.mr05{margin-right: 5px !important;}.mr10{margin-right: 10px !important;}.mr20{margin-right: 20px !important;}.mr30{margin-right: 30px !important;}.mr40{margin-right: 40px !important;}.mr50{margin-right: 50px !important;}
.mb0{margin-bottom: 0 !important;} .mb05{margin-bottom: 5px !important;} .mb10{margin-bottom: 10px !important;} .mb20{margin-bottom: 20px !important;} .mb30{margin-bottom: 30px !important;} .mb40{margin-bottom: 40px !important;} .mb50{margin-bottom: 50px !important;} .mb60{margin-bottom: 60px !important;} .mb70{margin-bottom: 70px !important;} .mb80{margin-bottom: 80px !important;} .mb90{margin-bottom: 90px !important;} .mb100{margin-bottom: 100px !important;}
.ml0{margin-left: 0 !important;} .ml05{margin-left: 5px !important;} .ml10{margin-left: 10px !important;} .ml20{margin-left: 20px !important;} .ml30{margin-left: 30px !important;} .ml40{margin-left: 40px !important;} .ml50{margin-left: 50px !important;}
/* Text
---------------------------------------------------------- */
/* =========================================================
 4.0 - Template 
========================================================= */
/* transition */
 
#nav .btn_nav,
#nav .btn_nav span{
 -webkit-transition: all .2s;
 transition: all .2s;
 }
 
#nav nav{
 -webkit-transition: height .2s;
 transition: height .2s;
 }
@media print, screen and (min-width: 769px) {
 a,
 a img{
 -webkit-transition: opacity .3s, background .4s;
 transition: opacity .3s, background .4s;
 }
 
 /*#nav nav{
 -webkit-transition: height 0s;
 transition: height 0s;
 }*/
 }
/* z-index */
#nav .btn_nav{
 z-index: 102;
 }
#nav nav{
 z-index: 101;
 }
#btn_pagetop{
 z-index: 110;
 }
#btn_pagetop span:after{
 z-index: 111;
 }
@media print, screen and (min-width: 769px) {
 }
/*背後スクロール固定用*/
.scroll-prevent {
 overflow: hidden;
 touch-action: none;
 }
@media print, screen and (min-width: 769px) {}
/* スマホ用アニメーション設定 */
@media print, screen and (max-width: 768px) {
 /* scrollanime */
 .scrollanime_sp {opacity: 0;}
 .fadeIn_sp {
 opacity: 0;
 animation: fadeIn .6s forwards ease-in-out;
 }
 .fadeInDown_sp {
 opacity: 0;
 animation: fadeInDown .6s forwards ease-in-out;
 }
 
 /*.downup {transform: translateY(30px);}*/
 
 .delay01_sp{animation-delay: 100ms;}
 .delay02_sp{animation-delay: 200ms;}
 .delay03_sp{animation-delay: 300ms;}
 .delay04_sp{animation-delay: 400ms;}
 .delay05_sp{animation-delay: 500ms;}
 .delay06_sp{animation-delay: 600ms;}
 .delay07_sp{animation-delay: 700ms;}
 .delay08_sp{animation-delay: 800ms;}
 .delay09_sp{animation-delay: 900ms;}
 .delay10_sp{animation-delay: 1000ms;}
}
/* PC用アニメーション設定 */
@media print, screen and (min-width: 769px) {
 .scrollanime {opacity: 0;}
 .fadeInDown {
 opacity: 0;
 animation: fadeInDown .6s forwards ease-in-out;
 }
 .fadeInLeft {
 animation: header_index .8s forwards ease-in-out;
 animation-delay: 300ms;
 }
 .fadeInLeft2 {
 animation: header_index2 .8s forwards ease-in-out;
 animation-delay: 300ms;
 }
 
 .leftToRight{
 animation: leftright .8s forwards ease-in-out;
 }
 
 .leftToRight{
 opacity: 1;
 animation: width0 .6s forwards ease-in-out;
 animation-delay: 850ms;
 }
.downup {transform: translateY(40px);}
.slide-right {transform: translateX(150px);} 
.leftright {left: -2000px; }
 
.delay01{animation-delay: 150ms;}
.delay02{animation-delay: 300ms;}
.delay03{animation-delay: 450ms;}
.delay04{animation-delay: 600ms;}
.delay05{animation-delay: 750ms;}
.delay06{animation-delay: 900ms;}
.delay07{animation-delay: 1050ms;}
.delay08{animation-delay: 1200ms;}
.delay09{animation-delay: 1350ms;}
.delay10{animation-delay: 1500ms;}
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 }
 100% {
 opacity: 1;
 transform: translate(0);
 }
 }
@keyframes fadeIn {
 0% {
 opacity: 0; 
 }
 100% {
 opacity: 1;
 }
 }
@keyframes header_index {
 0% {transform: scaleX(1);}
 100% {transform: scaleX(0);}
 }
@keyframes header_index2 {
 0% {width:100%;}
 100% {width:0;}
 }
@keyframes width0 {
 0% {width:100%;}
 100% {width:0;}
 }
@media print, screen and (min-width: 769px) {
}
/*
========================================================= */
@media print, screen and (min-width: 769px) {}</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.n-coke.com/common/css/style.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://www.n-coke.com/common/css/style.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>