@charset "utf-8";/*文字コード指定*/

/*CSSリセット*-------------------------------------------------------------------------↓*/
/*-------------------------------------------------------------------------------------------*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}/*CSSリセット-------------------------------------------------------------------------↑*/

/*全体CSS-------------------------------------------------------------------------------↓*/
html, body, input, button, textarea, select {
    font-family: Helvetica, Arial, Doroid Sans, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
html{
    font-size: 62.5%;
}
body{
    font-feature-settings: "palt";
    line-height: 2;
    -webkit-text-size-adjust: 100%;
}
@font-face {/*フォント読み込み*/
    font-family: 'midasifont';
    src: url('../font/logotypejp_corpmin.ttf') format('opentype');
}
@font-face {/*はんなり明朝フォント読み込み*/
    font-family: 'HannariFont';
    src: url('https://www.rakuten.ne.jp/gold/foodart-by-saveur/font/Hannari.otf') format('truetype');
}
@font-face {/*IPA P明朝フォント読み込み*/
    font-family: 'IPAPFont';
    src: url('../font/ipam.ttf') format('truetype');
}
.myfont {
    font-family: 'sp_honbunfont', serif; 
}
h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 4.0rem;
}
h2 {
    font-family: "IPAPFont", serif , 游明朝, 'Yu Mincho';
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.0rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 3.4rem;
    margin: 0 0 5px 0;
}
.bi_top_text h1 {
    font-family: "IPAPFont", serif , 游明朝, 'Yu Mincho';
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.0rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 3.4rem;
    margin: 0 0 5px 0;
}
h3{
    font-family: "IPAPFont", serif , 游明朝, 'Yu Mincho';
}
ol,ul {
    list-style:none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, body {
        font-feature-settings: "pkna";
    }
}
.animation-box{/*表示アニメ設定*/
    background-size:20%;
    background-repeat: no-repeat;
    opacity: 0.1;
    transition:2.0s;
}
.animation-box.active{
    background-repeat: no-repeat;
    background-size:260%;
    opacity: 1.0;
}
.scr_anime.active{
    bottom: 0 ;
    left: 0 ;
    opacity: 1.0;
    transform:rotate(0deg);
    transition:1.0s;
}
.comp_img_copybox_link a, .recr_link a, .pro_link a{/*リンク範囲拡大*/
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div.page_move_svg {
    float: left;
    line-height: 0;
    transform: translate(calc(50vw - 50%),calc(50vh - 65%));
    overflow: visible;
    padding: 1%;
    position: fixed;
    width: 90%;
    z-index: 20000;
}
#kagomoto_anime_pagemove{
    display: none;
    fill: transparent;
    height: auto;
    margin: 0 5%;
    width: 90%;
    animation: kago_pagemove 2s ease-in-out 0s forwards;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}
@keyframes kago_pagemove {
    0% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}
h4 > span, p > span, dt > span{
    display: inline-block;
}

/*-------------------------------------------------------------------------------------------*/
/* ▼デフォルトCSS(ウィンドウ幅が~479pxの場合に適用)                                    */
/*-------------------------------------------------------------------------------------------*/
.pc_heder{/*デフォルトCSS--------------------------------------------------ヘッダー↓*/
    background-color: rgba( 255, 255, 255,0.9);
    display: none;
    height: 140px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}
img.pc_heder_l{
    left: 0;
    position: absolute;
    top: 0;
}
div.pc_heder_l{
    display: block;
    float: left;
    height: 100px;
    left: 0;
    top: 0;
    width: 100vw;
}
.reindeer{
    filter: drop-shadow(5px 5px 0px rgba(255,255,255,0.6));
    height: 90px;
    padding: 5px;
    width: 100vw;
    animation: kago_headanime 10s infinite linear 0s forwards;
}
@keyframes kago_headanime {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
div.pc_heder_r{
    float: right;
    height: 40px;
    overflow: hidden;
    width: 100vw;
}
div.pc_heder_r_nav{
    float: right;
    width: 100vw;
}
.pc_heder_cont{
    align-items: center;
    display: -webkit-flex;
    display: flex;
    justify-content:space-around;
    margin: 0 auto;
}
.pc_heder li {
    height: auto;
}
.pc_heder_cont a {
    align-items: center;
    border-radius: 5px;
    color: #000000;
    display: grid;
    font-family: "midasifont", serif;
    font-size: 1.5rem;
    height: auto;
    line-height: 1;
    margin: 5px;
    overflow: hidden;
    padding: 2px 1px;
    text-decoration: none;
}
.pc_heder_cont img {
    height: 100%;
}
.main-nav .logo {
    background: #4584b1;
}
div.pc_heder_r_time{
    float: right;
    height: auto;
    margin: 0 5px 0 0;
    position: relative;
    width: 200px;
}/*デフォルトCSS-------------------------------------------------------------ヘッダー↑*/

.pc_footer{/*デフォルトCSS-------------------------------------------------フッター↓*/
    bottom: 0;
    display: none;
    height: 50px;
    position: fixed;
    width: 100%;
    z-index: 2;
}
div.pc_footer_l{
    background-color: rgba( 255, 255, 255,0.9);
    display: block;
    bottom: 0;
    float: left;
    height: 50px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}
div.pc_footer_l_copyr{
    display: block;
    color: #000000;
    font-size: 0.95rem;
    left: 50%;
    overflow: hidden;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}/*デフォルトCSS-------------------------------------------------------------フッター↑*/
ul.member_list_01 > li:nth-child(1):before {
    content: "デフォルト_CSS";
    color: deeppink;
    font-size: 0.8rem;
}
.twit{
    display: block;
    float: right;
    opacity: 0;
    position: relative;
}

/*-------------------------------------------------------------------------------------------*/
/* ▼SP_CSS ウィンドウ幅が480px~599pxの場合に適用                                      */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 480px) {
    .pc_heder{/*SP_CSS------------------------------------------------------ヘッダー↓*/
        height: 130px;
    }
    div.pc_heder_r{
        height: 30px;
    }/*SP_CSS-----------------------------------------------------------------ヘッダー↑*/

    div.pc_footer_l_copyr{/*SP_CSS-----------------------------------------フッター↓*/
        font-size: 1.0rem;
    }/*SP_CSS------------------------------------------------------------------フッター↑*/
}

/*-------------------------------------------------------------------------------------------*/
/* ▼タブレット_CSS ウィンドウ幅が600px~959pxの場合に適用                           */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) {
    .animation-box.active{
        background-repeat: no-repeat;
        background-size:180%;
        opacity: 1.0;
    }
    .pc_heder{/*タブレット_CSS---------------------------------------------ヘッダー↓*/
        height: 130px;
    }
    .pc_heder_cont a {
        font-size: 1.6rem;
    }
    div.pc_heder_r{
        height: 30px;
    }
}/*タブレット_CSS-----------------------------------------------------------ヘッダー↑*/

/*-------------------------------------------------------------------------------------------*/
/* ▼小型PC_CSS ウィンドウ幅が960px~1279pxの場合に適用                               */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
    .pc_heder{/*小型PC_CSS-------------------------------------------------ヘッダー↓*/
        height: 140px;
    }
    .pc_heder_cont a {
        font-size: 2.0rem;
    }
    div.pc_heder_r{
        height: 40px;
    }
    h3{
        display:inline;
    }
}/*小型PC_CSS----------------------------------------------------------------ヘッダー↑*/

/*-------------------------------------------------------------------------------------------*/
/* ▼大型PC_CSS ウィンドウ幅が1280px以上の場合に適用                                    */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
    .pc_heder{/*大型PC_CSS-------------------------------------------------ヘッダー↓*/
        display: none;
        height: 100px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
    }
    img.pc_heder_l{
        left: 0;
        position: absolute;
        top: 0;
    }
    div.pc_heder_l{
        display: block;
        float: left;
        height: 100px;
        left: 0;
        top: 0;
        width: 329px;
    }
    .reindeer{
        height: 90px;
        padding: 5px;
        width: 319px;
    }
    div.pc_heder_r{
        float: right;
        height: 100px;
        overflow: hidden;
        width: calc(100% - 329px);
    }
    div.pc_heder_r_nav{
        float: right;
        transform: translate(calc(100% - 100%),calc(100% - 35%));
        width: auto;
    }
    .pc_heder_cont{
        align-items: center;
        display: -webkit-flex;
        display: flex;
        margin: 0 auto;
    }
    .pc_heder li {
        height: auto;
    }
    .pc_heder_cont a {
        align-items: center;
        border-radius: 5px;
        color: #000000;
        display: grid;
        font-size: 3.5rem;
        height: 40px;
        line-height: 1;
        margin: 5px;
        overflow: hidden;
        padding: 5px 10px;
        text-decoration: none;
    }
    .pc_heder_cont img {
        height: 100%;
    }
    .main-nav .logo {
      background: #4584b1;
    }
    div.pc_heder_r_time{
        float: right;
        height: auto;
        margin: 0 5px 0 0;
        position: relative;
        width: 200px;
    }
}/*大型PC_CSS------------------------------------------------------------ヘッダー↑*/