@charset 'utf-8';



/*input[list]::-webkit-calendar-picker-indicator {
display: none;
}

.table-form__num {
    width: 90%;
}*/

/* ---------------------------------------------------------
Typography
----------------------------------------------------------*/
/* Typography */
/* * "FontName" licensed under the SIL Open Font License * http://drinchev.github.io/monosocialiconsfont/ */
@font-face {
    font-family: 'Mono Social Icons Font';
    src: url('../web-font/MonoSocialIconsFont-1.10.eot');
    src: url('../web-font/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
         url('../web-font/MonoSocialIconsFont-1.10.woff') format('woff'),
         url('../web-font/MonoSocialIconsFont-1.10.ttf') format('truetype'),
         url('../web-font/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');/*unuse*/
    src: url('../web-font/MonoSocialIconsFont-1.10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Typography/ */



/* ==========================================
Helper
========================================== */
/* Resetcss-plusalpha */
body {
    text-decoration: none;
}

button {
    width: auto;
    padding:0;
    margin:0;
    background:none;
    border:0;
/*    font-size:0;*/
    line-height:0;
    overflow:visible;
    cursor:pointer;
}

/* reset google adsece backgraoudcolor */
ins {
  background: none;
}
/* /Resetcss-plusalpha */

/* Clearfix */
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

/* Fluid-image */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

html {
    font-size: 62.5%;
}

html,body {
    height:100%;/* htmlタグに付けた理由は、Iosのposition-fixedのバグ回避の為。二つのタグに付けた理由は、heightを%指定できるようにする為 */ 
}

.paragraph-oneline {
    margin-bottom: 1em;
}

.txt-bold {
    margin-bottom: 1em;
    font-weight: bold;
}

@media (min-width: 48em) {
.width-responsive--midium {
    width: 60%;
}
}

@media (min-width: 62em) {
.width-responsive--midium {
    width: 30%;
}
}

@media (min-width: 48em) {
.width-responsive--large {
    width: 70%;
}
}

@media (min-width: 62em) {
.width-responsive--large {
    width: 50%;
}
}

/* mousepointer-finger,hover-opacey */
.animation-hover,.gnavi a, .address__tel, .address__mail {
    transition-duration: 1s;
    transition-property: opacity;
}

.action-hover:hover,.gnavi a:hover, .address__tel:hover, .address__mail:hover  {
    cursor:pointer;
    opacity: 0.5;
}

/* ソースコードを記載する場合、これがないと改行しないため */
pre {
    white-space: pre-wrap;
}

/* ---------------------------------------------------------
各種ページでよく使うCSS
----------------------------------------------------------*/
.secondly-btn {
    width: 7rem;
    height: 4rem;
/*  line-height: 5rem;*/
    padding: .5rem 1rem;
    background: linear-gradient(to right bottom, rgba(0, 255, 255, .3), rgba(0, 0, 255, .3) 15%, rgba(0, 255, 255, .3) 33%, rgba(0, 0, 255, .3) 49%, rgba(0, 255, 255, .3) 67%, rgba(0, 0, 255, .3) 84%, rgba(0, 255, 255, .3));
    text-shadow: 0px 0px 10px rgba(0,0,200,.4), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 0px 0px 10px rgba(0,0,200,.5), 2px 2px 2px rgba(0,0,200,.5);
    box-shadow: 0 .1rem .1rem rgba(0,0,0,.9);
    font-size: 1.6rem;
    color: #fff;
}

/* input */
.input-grad--blue {
    height: 3rem;
    background: linear-gradient(to right bottom, rgba(0, 255, 255, .3), rgba(0, 0, 255, .3) 15%, rgba(0, 255, 255, .3) 33%, rgba(0, 0, 255, .3) 49%, rgba(0, 255, 255, .3) 67%, rgba(0, 0, 255, .3) 84%, rgba(0, 255, 255, .3));
    text-shadow: 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 2px 2px 2px rgba(0,0,200, .5);
    box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,.9);
    font-size: 1.8rem;
    color: #fff;
}

::-webkit-input-placeholder {
  color: #fff;
  opacity: .6;
}

::-moz-placeholder {
  color: #fff;
  opacity: .6;
}

:-ms-input-placeholder {
  color: #fff;
  opacity: .6;
}

/* textarea */
.textarea {
    width: 100%;
    height: 20rem;
    background: linear-gradient(to right bottom, rgba(0, 255, 255, .3), rgba(0, 0, 255, .3) 15%, rgba(0, 255, 255, .3) 33%, rgba(0, 0, 255, .3) 49%, rgba(0, 255, 255, .3) 67%, rgba(0, 0, 255, .3) 84%, rgba(0, 255, 255, .3));
    text-shadow: 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 0px 0px 10px rgba(0,0,200, .5), 2px 2px 2px rgba(0,0,200, .5);
    box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,.9);
    color: #fff;
}

.white-shadow {
    text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 2px 2px 2px rgba(0,0,0,.9);
}

.small-txt {
    font-size: 1rem;
    line-height: .2rem!important;
}

/* ---------------------------------------------------------
Body
----------------------------------------------------------*/
body {
    min-width: 320px;
    margin: auto;
    background: #fff;/* iPhoneの初期背景色が灰色の為 */
    font-family: -apple-system, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'メイリオ', meiryo, sans-serif;
    line-height: 1.6;
    letter-spacing: 1px;
    font-size: 1rem;
}

.container {
    /*max-width: 1920px;最大サイズを指定したい場合に記載*/
    overflow: hidden; /* Iphoneのばぐ対策。レスポンシブの際に右側に一列の隙間ができるので、それを隠す。 */
}

/* ---------------------------------------------------------
Header
----------------------------------------------------------*/
.header {
    position: relative;
    width : 100%;
    height: auto;
    padding-top: 85%;
    background: linear-gradient(to right bottom, rgba(190, 255, 25, 0.6), rgba(110, 110, 255, 0.6) 15%, rgba(190, 255, 25, 0.6) 33%, rgba(110, 110, 255, 0.6) 49%, rgba(190, 255, 25, 0.6) 67%, rgba(110, 110, 255, 0.6) 84%, rgba(190, 255, 25, 0.6))
    , url(../img/common-img/main-img.jpg) no-repeat;
    /*background: linear-gradient(to left bottom, rgba(190, 255, 25, 0.6), rgba(110, 110, 255, 0.6) 15%, rgba(190, 255, 25, 0.6) 33%, rgba(110, 110, 255, 0.6) 49%, rgba(190, 255, 25, 0.6) 67%, rgba(110, 110, 255, 0.6) 84%, rgba(190, 255, 25, 0.6))
    , url(../img/common-img/main-img.jpg) no-repeat;*/
    /*background: linear-gradient(to right bottom, rgba(190, 255, 25, 0.6), rgba(110, 110, 255, 0.6) 15%, rgba(110, 110, 255, 0.6) 84%, rgba(110, 110, 255, 0.6))
    , url(../img/common-img/main-img.jpg) no-repeat;*/
    background-size: cover;
    box-shadow: 0.01rem 0.3rem 0.3rem rgba(0,0,0,.9); 
}

@media (min-width: 960px) {
.header {
    padding-top: 57.2%;
    box-shadow: 0.05rem 0.35rem 0.35rem rgba(0,0,0,.9); 
}
}

.item-wrap {
    position: absolute;
    top: 0%;
    right: 0%;
    text-align: left;
}

@media (min-width: 640px) {
.item-wrap {
    top: 4%;
    right: 3%;
}
}

.heading1 {
    color: white;
    font-size: 1.1rem;
}

@media (min-width: 640px) {
.heading1 {
    font-size: 1.2rem;
}
}

@media (min-width: 960px) {
.heading1 {
    font-size: 1.4rem;
}
}

/* address */
.header__address {
    display: inline;
    font-size: 1.8rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
    line-height: 1.7;
}

@media (min-width: 640px) {
.header__address {
    font-size: 2.5rem;
}
}

@media (min-width: 960px) {
.header__address {
    right: 13.5%;
    font-size: 2.7rem;
}
}

.address__tel,.header__address__mail {
    color: #00ff8a;
}

/* Social-button */
.symbol,.symbol:before {
    font-family: 'Mono Social Icons Font';
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.symbol:before{
    content: attr(title);
}

.social-btn {
    display: inline;
    text-shadow: 1px 1px 2px rgba(0,0,0,.9);
}

.symbol--hatebu {
    position: relative;
    top: .7rem;
    display: inline-block;
    color: #00bbff;
}

@media (min-width: 640px) {
.symbol--hatebu {
    top: 1.1rem;
}
}

.social-btn_size_large--hatebu {
    font-size: 4rem !important;
}

@media (min-width: 640px) {
.social-btn_size_large--hatebu {
    font-size: 5rem !important;
}
}

@media (min-width: 960px) {
.social-btn_size_large--hatebu {
    font-size: 6rem !important;
}
}

.social-btn_size_large--hatebu-drawer {
    font-size: 5rem !important;
}

/*@media (min-width: 640px) {
.social-btn_size_large--hatebu-drawer {
    font-size: 5rem !important;
}
}*/

.symbol {
    display: inline-block;
    color: #00bbff;
    font-size: 5rem;
}

@media (min-width: 640px) {
.social-btn_size_large, .symbol {
    font-size: 6rem;
}
}

@media (min-width: 960px) {
.social-btn_size_large, .symbol {
    font-size: 7.5rem;
}
}
/* /Social-button */

/* 画面外にいる状態 */



/* Slide-show */
.main-copy {
    width: 90%;
    text-align: center;
    font-size: 1.6rem;
    text-shadow:
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            0px 0px 10px #fff,
            2px 2px 2px rgba(0,0,0,.9);
    color: #000;
    font-weight: bold;
    /* centerring */
    position: absolute;
    top: 60%;
    left: 50%;
    display: inline;
    transform: translate(-50%, -50%);
    /* /centerring */
}

@media (min-width: 640px) {
.main-copy {
    font-size: 3rem;
    /* centerring */
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline;
    transform: translate(-50%, -50%);
    /* /centerring */
}
}

@media (min-width: 960px) {
.main-copy {
    font-size: 4rem;
}
}
/* /Stydy-application */

.slide-text-fadeout {
    opacity : 0;
    /* slide-textに、centerringがあるため、値が-50%になっている */
    transform : translate(-50%, 0);
    transition : all 1000ms;
}

/* 画面内に入った状態 */
.slide-text-fadein {
    opacity : 1;
    /* slide-textに、centerringがあるため、値が-50%になっている */
    transform : translate(-50%, -50%);
        transition : all 1000ms;
}



/* ---------------------------------------------------------
Main Navigation
----------------------------------------------------------*/
.gnavi {
    width: 100%;
    margin: 4% auto 0;
}

@media (min-width: 640px) {
.gnavi {
    width: 64rem;    
    margin: 1% auto -2%;
}
}

@media (min-width: 960px) {
.gnavi {
    width: 75rem; 
    margin: 1% auto -2%;
}
}

/* アイコンの説明文字の字間 */
.gnavi__list {
    font-family: 'Mono Social Icons Font';
    letter-spacing: 0px;
    text-align: center;
}

@media (min-width: 360px) {
.gnavi__list {
    letter-spacing: 0.1rem;
}
}

@media (min-width: 480px) {
.gnavi__list {
    letter-spacing: 0.12rem;
}
}

@media (min-width: 640px) {
.gnavi__list {
    letter-spacing: 0.21rem;
}
}
/*　/アイコンの説明文字の字間 */

.gnavi__list li {
    display: inline-block;
    width: 18.7%;   
    line-height: 0.5;/* メインイメージとの行間 */
    text-align: center;
}

@media (min-width: 640px) {
.gnavi__list li {
    display: inline-block;
    width: 11%;
}
}

@media (min-width: 960px) {
.gnavi li {
    display: inline-block;
    width: 11.5% ;  /*     12.5%        ----------- */
}
}

/* マテリアルアイコンのみ行の高さが不要な為 */
.top-gnavi__link-eighth {
    line-height: 0;
}

/* シャドウ不要のアイコンの効果を消す為 */
.gnavi li:first-child,.gnavi li:nth-child(6) {
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
}

/* ブロック要素でないと、アニメーションが動かない為、アニメーションがいらなければ削除可能（下記条件付） */
.gnavi a {
    display: inline-block;
}
/* （下記条件付）
ただし.gnavi aを削除した場合は下記を有効化しないといけない。
position: relative;のnegativeだと、display: inline-block;を.top-gnavi__link-eighthに使用しないと、
なぜかファイヤーフォックスだけずれる為
.top-gnavi__link-eighth{
    display: inline-block;
}
 */
/* /アニメーションが動かない為 */

.gnavi li a,.gnavi li:first-child,.top-gnavi__link-sixth__goto-other-page,.gnavi__link-text {      
    color: #00bbff; 
}

@media (min-width: 640px) {
.gnavi li:first-child {
    display: inline-block;
    width: 12.2% ;
}
}

@media (min-width: 960px) {   
.gnavi li:first-child {
    width: 12.5% ;
}             
}

/*goto-other-pageのサイズ、ここのみsvgで作成した為*/
.top-gnavi__link-sixth__goto-other-page {
    width: 3.7rem;
}

@media (min-width: 640px) {   
.top-gnavi__link-sixth__goto-other-page {
    width: 3.7rem;
}             
}

@media (min-width: 960px) {   
.top-gnavi__link-sixth__goto-other-page {
    width: 4.7rem;
}             
}

.top-gnavi__link-fifth span {
     color: #00ff8a;    
}

/*アイコンのサイズなど*/
.gnavi__link-icon,.gnavi__first-icon,.gnavi__link-icon-top {
    display: inline-block;
    margin-bottom: 1.3rem;/* アイコンとアイコンテキストの隙間、マテリアルアイコンは下で上書きしている */
    font-size: 7rem;   
}

@media (min-width: 640px) {   
.gnavi__link-icon,.gnavi__first-icon,.top-gnavi__link-sixth__goto-other-page,.gnavi__link-icon-top {
    font-size: 7rem; 
}             
}

@media (min-width: 960px) {   
.gnavi__link-icon,.gnavi__first-icon,.top-gnavi__link-sixth__goto-other-page,.gnavi__link-icon-top {
    font-size: 9rem; 
}             
}

/* ブログのアイコンとテキストの間の隙間 */
.gnavi__icon_material_top,.gnavi__icon_material_blog {
    position: relative;
    display: inline-block;
    text-align: center;
    }

/* negative-marginだと、firefoxだけ計算方法が違う為、positionを使用 */

/* TOP、BLOGアイコンは、他のアイコンと下部の隙間が違う為 */
.gnavi__icon_material_top {
    bottom: -0.7rem;
}

@media (min-width: 480px) {
.gnavi__icon_material_top {
    bottom: -0.7rem;
} 
}

@media (min-width: 960px) {
.gnavi__icon_material_top {
    bottom: -0.7rem;
}    
}

.gnavi__icon_material_blog {
    bottom: -0.7rem;
}

@media (min-width: 480px) {
.gnavi__icon_material_blog {
    bottom: -1rem;
}    
}

@media (min-width: 960px) {
.gnavi__icon_material_blog {
    bottom: -1.25rem;
}    
}
/* /TOP、BLOGアイコンは、他のアイコンと下部の隙間が違う為 */

/* マテリアルアイコントップページのサイズ */
.gnavi__link-icon-top .material-icons {
    font-size: 4.7rem;    
}

@media (min-width: 960px) {   
.gnavi__link-icon-top .material-icons {
    font-size: 5.7rem; 
}             
}

/* マテリアルアイコンブログのサイズ */
.gnavi__link-icon-blog .material-icons {
    font-size: 5.5rem;    
}

@media (min-width: 960px) {   
.gnavi__link-icon-blog .material-icons {
    font-size: 6.7rem; 
}             
}

/* モーダルウィンドウのgototopのサイズは,.drawermenu__material-iconsにある */

/* テキストのサイズ */
.gnavi__link-text,.gnavi__text {
    font-size: 1.4rem;
    font-weight: bold;
}

@media (min-width: 640px) {   
.gnavi__link-text,.gnavi__text {
    font-size: 1.4rem;
}
}

@media (min-width: 960px) {   
.gnavi__link-text,.gnavi__text {
    font-size: 1.5rem;
}
}

/* アイコンをホバーした時の効果 */
/* Gnaviのみに適応したい場合 */
.rotate-180deg {
    transition-duration: 1s;
    transition-property: all;    
}

.rotate-180deg:hover {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);/* IEだけ、動きが違う */    
}

/* IE10以上はホバー時の動きがおかしい為、動かないようにする */
@media all and (-ms-high-contrast: none) {
    .rotate-180deg:hover {
        transform: rotateY(0deg);
    }
}
/* /Gnaviのみに適応したい場合 */

/* すべての要素に適応したい場合は下記を有効化 */
/*a,.inquiry-form__primary-btn {
    transition-duration: 1s;
    transition-property: all;    
}

a:hover,:hover.inquiry-form__primary-btn {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    opacity: 0.5;
}*/
/* /すべての要素に適応したい場合は下記を有効化 */

/* 要素がfadeinして動く効果 */
/* 対象の要素-下から */
.js-fadein-from-bottom {
    opacity : 0;/* 対象の要素の初期の不透明度 */
    transform : translate(0, 5rem);
    transition : all 1500ms;/* どれくらいで動きが終了するか */
}
/* /対象の要素 */

/* /要素がfadeinして上から下に動く効果 */
.js-translate3d-lower-right {
    opacity : 0;/* 対象の要素の初期の不透明度 */
    transform: translate3d(-1rem,-2rem,-5rem);
    /*transform : translate(5rem, 0);横からスライド*/
    transition : all 2500ms;
}
/* /対象の要素 */

/* /要素がfadeinして下から上に動く効果 */
/* 対象の要素 */
.translate3d-to-upper-left {
    opacity : 0;/* 対象の要素の初期の不透明度 */
    transform: translate3d(5rem,2rem,1rem);
    transition : all 1500ms;
}
/* /対象の要素 */

/* 元の位置に戻す-translateすべて共有 */
.scrollin {
    opacity : 1;/* opacity:0;に勝つように、必ず一番下に配置する */
    transform : translate(0, 0);
    }
/* /元の位置に戻す-translateすべて共有 */



/* ---------------------------------------------------------
MainContent-First
----------------------------------------------------------*/
/* メインコンテンツの背景共通 */
main {
    font-size: 1.6rem;
}

.wrap-skew1 {
    transform: skewY(-6deg);
    margin: 0px auto 10%;
    padding: 0px;
    background: linear-gradient(to right bottom, rgba(0, 255, 255, 0.4), rgba(190,110, 25, 0.4) 15%, rgba(0, 255, 255, 0.4) 33%, rgba(190,110, 25, 0.4) 49%, rgba(0, 255, 255, 0.4) 67%, rgba(190,110, 25, 0.4) 84%, rgba(0, 255, 255, 0.4));
    /*other-pattern*/
    /*background: rgba( 229, 228, 255, 0.7 );*/
    /*background: linear-gradient(to left bottom, rgba(190, 255, 25, 0.6), rgba(110, 110, 255, 0.6) 15%, rgba(190, 255, 25, 0.6) 33%, rgba(110, 110, 255, 0.6) 49%, rgba(190, 255, 25, 0.6) 67%, rgba(110, 110, 255, 0.6) 84%, rgba(190, 255, 25, 0.6));*/
    text-align: left;
}

@media (min-width: 640px) {   
.wrap-skew1 {
    transform: skewY(-5deg);
}             
}

@media (min-width: 960px) {   
.wrap-skew1 {
    transform: skewY(-3.5deg);
    margin: 0px auto 5%;
    background: linear-gradient(to right bottom, rgba(0, 255, 255, 0.5), rgba(0, 0, 255, 0.5) 15%, rgba(0, 255, 255, 0.5) 33%, rgba(0, 0, 255, 0.5) 49%, rgba(0, 255, 255, 0.5) 67%, rgba(0, 0, 255, 0.5) 84%, rgba(0, 255, 255, 0.5));
}             
}

.wrap-skew2 {
    transform: skewY(6deg);
    width: 100%;
    margin: 0px auto;
    padding: 0px;
    background: rgba( 190, 250, 255, 0.6 );
    /*background: linear-gradient(to left bottom, rgba(0, 255, 255, 0.1), rgba(0, 0, 255, 0.1) 15%, rgba(0, 255, 255, 0.1) 33%, rgba(0, 0, 255, 0.1) 49%, rgba(0, 255, 255, 0.1) 67%, rgba(0, 0, 255, 0.1) 84%, rgba(0, 255, 255, 0.1));*/
}

@media (min-width: 640px) {   
.wrap-skew2 {
    transform: skewY(5deg);
}             
}

@media (min-width: 960px) {   
.wrap-skew2 {
    transform: skewY(3.5deg);
    background: rgba( 190, 250, 255, 0.4 );
}             
}

/* メインコンテンツのパッディング */
.wrap-content {
    padding: 15% 8%;
    transform: skewY(0deg);
}

@media (min-width: 640px) {   
.wrap-content {
    padding: 11% 11%;
}             
}

@media (min-width: 960px) {   
.wrap-content {
    padding: 9% 11%;
}             
}
/* /メインコンテンツのパッディング */

/* gallaryの見出しや段落のラップ、メインコンテンツの横幅 */
/* aboutmeの左右の隙間はcommomの.contentにある */
.widthmax-content-wrap {
    margin: auto 0;
}

@media (min-width: 360px) {
.widthmax-content-wrap {
    margin: auto 1%;
}
}

@media (min-width: 640px) {
.widthmax-content-wrap {
    margin: auto 8%;
}
}

@media (min-width: 960px) {
.widthmax-content-wrap {
    max-width: 63rem;
    margin: auto 11%;
}
}

.widthnormal-content-wrap {
    margin: auto 5%;
}

@media (min-width: 360px) {
.widthnormal-content-wrap {
    margin: auto 8%;
}
}

@media (min-width: 640px) {
.widthnormal-content-wrap {
    margin: auto 9%;
}
}

@media (min-width: 960px) {
.widthnormal-content-wrap {
    width: 41%;
    margin: auto 11%;
}
}
/* /gallaryの見出しや段落のラップ、メインコンテンツの横幅 */

/* メインコンテンツの背景 */
.first-section-skew1 {
    margin-top: 5%;
    padding: 0px;
}

/*mapなど横幅いっぱいのセクション*/
.content-wrap-widthfull {
    padding: 15% 0%;/*マップを横幅100%表記する為*/
}

@media (min-width: 960px) {
.content-wrap-widthfull {
    padding: 9% 0%;
}
}

/* 見出しの共通クラス */
.heading2 {
    margin-bottom: 1em;
    font-size: 3.5rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading3 {
    margin: 2em 0 1em;
    font-size: 3rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading4 {
    margin: 2em 0 1em;
    font-size: 2.7rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading5 {
    margin: 2em 0 1em;
    font-size: 2.4rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading6 {
    margin: 2em 0 1.5em;
    font-size: 2.1rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading7 {
    margin: 2em 0 1.5em;
    font-size: 2rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading8 {
    margin: 2em 0 1.5em;
    font-size: 1.9rem;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

/* 広告の見出し */
.heading--ad2 {
    margin-bottom: 1em;
    font-size: 3.5rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading--ad3 {
    margin: 2em 0 1em;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading--ad4 {
    margin: 2em 0 1em;
    font-size: 2.7rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading--ad5 {
    margin: 2em 0 1em;
    font-size: 2.4rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading--ad6 {
    margin: 2em 0 1.5em;
    font-size: 2.1rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading--ad7 {
    margin: 2em 0 1.5em;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

.heading--ad8 {
    margin: 2em 0 1.5em;
    font-size: 1.9rem;
    font-weight: bold;
    text-shadow: 
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05);
}

/* 問い合わせフォーム以外のボタンは各cssファイルでフォントサイズなどを上書きしている */
.primary-btn {
    display: block;
    padding: 0 1rem;
    margin-bottom: 4rem;
    height: 5.5rem;
    background: rgb(0, 239, 123);
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    letter-spacing: 2px;
    line-height: 5.5rem;
    text-align: center;
    box-shadow: 1px 1px 1px rgba(0,0,0,.7);
}

@media (min-width: 48em) {
.primary-btn {
    text-shadow: 1px 1px 0px #000,
                 -1px 1px 0px #000,
                 1px -1px 0px #000,
                 -1px -1px 0px #000;
    font-size: 2.7rem;
}
}

.primary-btn a {
    display: block;
}



/* ---------------------------------------------------------
Inquery
----------------------------------------------------------*/
.inquiry {
    position: relative;
    padding: 55rem 0 23.5rem 0;
    width : 100%;
    background: linear-gradient(to right bottom, rgba(190, 255, 25, 0.6), rgba(110, 110, 255, 0.6) 15%, rgba(190, 255, 25, 0.6) 33%, rgba(110, 110, 255, 0.6) 49%, rgba(190, 255, 25, 0.6) 67%, rgba(110, 110, 255, 0.6) 84%, rgba(190, 255, 25, 0.6))
    , url(../img/common-img/main-img.jpg) no-repeat;
/*    background: url(../img/common-img/inquery-back.png) no-repeat;*/
    background-position: center center;
    background-size: cover;
}

@media (min-width: 960px) {
.inquiry {
    padding: 53rem 0 34.5rem 0;
}
}

/*入力フォーム一覧の位地*/
.inquiry-wrap {
    position: absolute;
    top: 7.6%;
    left: 8%;
}

@media (min-width: 640px) {
.inquiry-wrap {
    top: 7.6%;
    left: 11%;
}
}

@media (min-width: 960px) {
.inquiry-wrap {
    position: absolute;
    top: 10.3%;
    left: 11%;
}
}

.heading2_color_white {
    text-shadow:
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05)
                ;
}

.heading2_color_white,.inquiry-form dt {
    color: white;
}

.inquiry-form dt {
    text-shadow:
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                2px 2px 2px rgba(0,0,0,.9);
    color: #000;
    font-weight: bold;
}

/*フォーム～ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
    width: 90%;
    height: 1.8em;
    line-height: 1.8;
    border-style: none;/*選択時の枠線を無くす*/
}

@media (min-width: 960px) {
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
    width: 40%;
}
}

.inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
    opacity: 0.7;
}

.inquiry-form__input-box {
    margin-bottom: 1rem;
}

.inquiry-form__input-box_kind_textarea .inquiry-form__body {
    margin-bottom: 2rem;
    resize: horizontal;/*横のみリサイズ可能*/
}

/* コメントボックスの高さ */
.inquiry-form__body {
    height: 7rem;
}

@media (min-width: 960px) {
.inquiry-form__body {
    height: 10rem;
}
}
/* /コメントボックスの高さ */

.inquiry-form__privacy {
    border: 0.1rem solid #03AFFF;
    width: 78%;
    padding: 2.3rem 3rem 0 3rem;
    height: 12rem;
    line-height: 2;
    overflow-y: scroll;
    background: #fff;
    opacity: 0.7;
}

@media (min-width: 960px) {
.inquiry-form__privacy {
    width: 37%;
}
}

.inquiry-form__primary-btn {
    display: block;
    margin-top: 4rem;
    height: 5.5rem;
    background: rgb(0, 239, 123);
    color: #fff;
    font-size: 2.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 5.5rem;
    text-align: center;
    text-shadow: 1px 1px 0px #000,
                 -1px 1px 0px #000,
                 1px -1px 0px #000,
                 -1px -1px 0px #000;
    box-shadow: 1px 1px 1px rgba(0,0,0,.7);
}

.brilliancy {
    animation: animation-brilliancy 3s infinite alternate;
    border-radius: 10rem;
}

@keyframes animation-brilliancy {
    0% {
        background-color:rgba(255,255,0,.03);
        box-shadow: 0 0 1rem rgba(255,255,0,.3),
                    0 0 5rem rgba(255,255,0,.1) inset;
        box-shadow: 0 0 1rem rgba(255, 241, 202, 0.3),
                    0 0 1rem rgba(255, 241, 2, 0.3);
        }
    100% {
        background-color:rgba(255,255,0,.2);
        box-shadow: 0 0 7rem rgba(255,255,0,.3),
                    0 0 7rem rgba(255,255,0,.3) inset;
        box-shadow: 0 0 3rem rgba(0, 239, 123, 0.8),
                    0 0 7rem rgba(0, 239, 123, 0.9);
        }
}


/* ---------------------------------------------------------
Footer
----------------------------------------------------------*/
.footer {
    padding: 8% 10%;
    box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; 
    text-align: center;
    font-size: 1.6rem;
    /*background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 0.2), rgba(0, 0, 255, 0.2) 15%, rgba(0, 255, 255, 0.2) 33%, rgba(0, 0, 255, 0.2) 49%, rgba(0, 255, 255, 0.2) 67%, rgba(0, 0, 255, 0.2) 84%, rgba(0, 255, 255, 0.2)) repeat scroll 0% 0%;*/
    background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 0.4), rgba(190,110, 25, 0.4) 15%, rgba(0, 255, 255, 0.4) 33%, rgba(190,110, 25, 0.4) 49%, rgba(0, 255, 255, 0.4) 67%, rgba(190,110, 25, 0.4) 84%, rgba(0, 255, 255, 0.4)) repeat scroll 0% 0%;    
    /*background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 1), rgba(0, 0, 255, 1) 15%, rgba(0, 255, 255, 1) 33%, rgba(0, 0, 255, 1) 49%, rgba(0, 255, 255, 1) 67%, rgba(0, 0, 255, 1) 84%, rgba(0, 255, 255, 1)) repeat scroll 0% 0%;*/
    /*background-image: linear-gradient(to right, rgb(52, 152, 219) 25%, rgb(41, 128, 185) 100%);*/
    /*-pie-background: linear-gradient(#8Fd537, #6Fb517);*/
}

@media (min-width: 960px) {
.footer {
    padding: 6% 10%;
    box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; 
}
}

@media (min-width: 960px) {
.footer {
    padding: 3.5% 10%;
    box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; 
}
}

/* address */
.address {
    display: inline;
    font-size: 1.8rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
    line-height: 1.5;/* Social-buttonとアドレスの間の隙間 */
}

@media (min-width: 640px) {
.address {
        font-size: 2.5rem;
}
}

@media (min-width: 960px) {
.address {
        font-size: 2.7rem;
}
}

/* ボタンやアドレスの色-はヘッダーと共通なのでヘッダーにある */
.address__tel,.address__mail {
    color: #00ff8a;
}
/* address */

/* Social-buttonのWEBfontの共通CSSはheaderにある */

.social-btn {
    display: inline; 
    line-height: .9;/* Social-buttonとアドレスの間の隙間 */
    text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
}
/* /Social-button */

/* gototop-footer */
[id="gototop"] i,[id="gototop"] a:visited  {
    font-size: 7rem!important;
    text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
    color: #00bbff;
}

@media (min-width: 960px) {
    [id="gototop"] {
    width: 9rem;
    margin: auto;
}
}

[id="gototop"] i,[id="gototop"] a:visited {
    font-size: 7rem!important;
    text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
    color: #00bbff;
}

@media (min-width: 960px) {
    [id="gototop"] i,[id="gototop"] a:visited {
    font-size: 9rem!important;
    text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
}
}



/* ---------------------------------------------------------
Other-Settings
----------------------------------------------------------*/
/* youtube */
.youtube-wrap {
  position:relative;
  width:90%;
  padding-top:56.25%;
}

.youtube-body {
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
/* /youtube */
/*      Mediqueries
        ----------- */
/* 左から出てくるdrawer-menu */
.drawermenu {
    z-index: 300;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    overflow-y: hidden;/* height: 101%;margin-right: -0.1rem;ではみ出させたスクロールバーを隠すため */
    padding-top: 0rem;
    text-align: center;
    cursor: pointer;
    margin-left: -100%;
    transition-property:all;
    transition-duration:1s;
}

@media (min-width: 960px) {
.drawermenu {
    padding-top: 2.8rem;
}    
}

.drawermenu ul {
    overflow-y: scroll;
    /*overflow-x: scroll;*/
    height: 101%;/* 下のスクロールバー */
    margin-right: -0.1rem;/*横のスクロールバーをはみ出して、上記のhiddenで隠す*/
    background: rgba( 0, 0, 255, .2 ); 
}

@media (min-width: 960px) {
.drawermenu ul {
    margin-right: -1.7rem;
}
}


.drawermenu li {
/*    width: 95.24%;*/
    margin-bottom: 0.2rem;
    background: rgba( 229, 228, 255, 0.3 );
}

.drawermenu li a {
    /* 高さの最小値を指定。これ以下の高さには絶対にならない */
    display: inline-table;
    min-height: 6rem;
    line-height: 2.2;
    margin: 0 auto;
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

@media (min-width: 960px) {
.drawermenu li a {
    font-size: 2.5rem;
}
}

.drawermenu__item--nolink {
    /* 高さの最小値を指定。これ以下の高さには絶対にならない */
    display: inline-table;
    min-height: 6rem;
    line-height: 2.2;
    margin: 0 auto;
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 0rem 0rem 2rem rgba(220,185,50,1), .1rem 0rem 0rem #FF864B, 0rem .1rem 0rem #FF864B, -.1rem 0rem 0rem #FF864B, 0rem -.1rem 0rem #FF864B;
}

@media (min-width: 960px) {
.drawermenu__item--nolink {
    font-size: 2.5rem;
}
}

.drawermenu__item--height {
    /* 高さの最小値を指定。これ以下の高さには絶対にならない */
    height: 6rem;
}

.drawermenu__item {
    min-height: 6rem;
    margin: 0 auto;
    width: 100%;
    display: block;
/*    text-align: center;*/
    z-index: 100;
}

.drawermenu__item-inner {
    display: table-cell;
    vertical-align: middle;
}

/* .modal-button-wrap__buttonをクリックした際に加えられる */
.showmenue {
    margin-left: 0%;
}
/* /.modal-button-wrap__buttonをクリックした際に加えられる */
/* 左から出てくるdrawer-menu */

/* modalwindow-button-white-threeborder */
/*モーダルウィンドウのボタンの囲い*/
.modal-button-wrap {
    position: fixed;
    top: 2%;
    right: 3%;
    z-index: 400;
}

@media (min-width: 960px) {
.modal-button-wrap {
    top: 5%;
    right: 5%;
}
}

/*モーダルウィンドウのボタン*/
/* shadow */
.modal-button-wrap__border {
    box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,.9);
}
/* /shadow */

.modal-button-wrap__button,
.modal-button-wrap__button span,.overlay-drawer {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

/*button-size*/
.modal-button-wrap__button,.overlay-drawer {
    position: relative;
    width: 5rem;
    height: 4.4rem;
}
/* /button-size */

.modal-button-wrap__button span,.overlay-drawer span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
}

/*　threewhiteline-アニメーションはここではなく下記　*/
.modal-button-wrap__button span:nth-of-type(1) {
    top: 0;
}
.modal-button-wrap__button span:nth-of-type(2) {
    top: 20px;
}
.modal-button-wrap__button span:nth-of-type(3) {
    bottom: 0;
}
/*　/threewhiteline　*/

/*drawermenuのボタンのアニメーション*/
.modal-button-wrap__button.active span:nth-of-type(1) {
    transform: translateY(20px) rotate(-315deg);
}

.modal-button-wrap__button.active span:nth-of-type(2) {
    opacity: 0;
}

.modal-button-wrap__button.active span:nth-of-type(3) {
    transform: translateY(-20px) rotate(315deg);
}

/* drawermenu-overlay-半透明のグレーバック */
/* lightbox-overlay-半透明のグレーバックは別のcss（.overlay） */
.overlay-drawer {
    z-index: 100;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.4);
    transition: all 3.3s;
}

.drawermenu__social-btn {
    font-size: 6.5rem!important;
    line-height: 1.2!important; /* .drawermenu li aのline-heightを上書きしている */
}

.drawermenu__material-icons {
    font-size: 7rem;
}

.material-icons_large {
    font-size: 8rem;
    line-height: 0.75;
}
/* /drawermenu　*/

/* lightbox-start　*/
/* lightbox-overlay-半透明のグレーバック */
/* drawermenu-overlay-半透明のグレーバックは別のcss（.overlay_drawermenu） */    
.overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.4);
    transition: all .3s;
}
/* /modalwindow-body */

/* light-box-yufuimages */ 
.lightbox-wrap__item {
    display: none;
    position:fixed;
    z-index:2;
    overflow-y: scroll!important;
    width: 98%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;     
    text-align: center;     
    vertical-align: middle;
    margin: auto;     
    cursor: pointer;   
}

@media (min-width:960px) {
.lightbox-wrap__item {
    display: none;
    position:fixed;
    z-index:2;    
    width: 70%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    cursor: pointer;
}
}

.lightbox-wrap .close {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@media (min-width: 480px) {
.lightbox-wrap .close {
    width: 50%;
}
}

@media (min-width: 960px) {
.lightbox-wrap .close {
    width: 80%;
}
}

@media (min-width: 1319px) {
.lightbox-wrap .close {
    width: 61%;
}
}
/* /lightbox　*/



/* adsence　*/
/* adsenceが左にずれる問題を解決するため　*/
.adsbygoogle {
    overflow: hidden;
}

.adcense--biggest {
    margin: 0 auto 5rem;
}

.adcense--big {
    margin: 0 auto 2rem;
}

@media (min-width: 480px) {
.adcense--big {
    margin: 1rem auto 2rem;
}
}

@media (min-width: 480px) {
.padding-left--over-tablet {
    padding-left: 8%;
}
}

.adsence-wrap-res-sizemin {
    width: 90%;
}

@media (min-width: 480px) {
.adsence-wrap-res-sizemin {
    width: 50%;
}
}

@media (min-width: 960px) {
.adsence-wrap-res-sizemin {
    width: 20rem;
    margin-bottom: 2rem;
}
}

@media (min-width: 960px) {
.adsence-wrap-twoline-pc {
    margin-bottom: 2rem;
}
}
/* /adsence　*/



/* 広告　*/
.ad-size-max {
    max-width: 450px;
}
/* /広告　*/


/* 一部のページにのみある要素　*/
/* 一部のページにのみある要素が左にずれる問題を解決するため　*/
.reset-btn {
    width: 8rem;
    padding: .8rem .5rem;
    background-color: rgba(25, 255, 119, 0.8);
}


/* 履歴や保存情報 */
/* 17.5emとは280pxのこと */
@media (min-width: 17.5em) {
.result-wrap {
    display: flex;
    flex-wrap: wrap;
}
}

@media (min-width: 17.5em) {
.result-item {
    flex-grow: 1;
    flex-basis: 50%;
}
}
/* /履歴や保存情報 */

/* /一部のページにのみある要素　*/





/* クイズのアイコンのアニメーション　*/
.anime-light {
    color: white;
    text-shadow: 0rem 0rem 2rem rgba(20,200,200,1), .1rem 0rem 0rem rgba(20,200,200,.8), 0rem .1rem 0rem rgba(20,200,200,.6), -.1rem 0rem 0rem rgba(20,200,200,.4), 0rem -.1rem 0rem rgba(20,200,200,.2);
    animation: animation-light 2s infinite alternate;
}

@keyframes animation-light {
    0% {
    color: rgba(20,200,200,1);
    }
    50% {
    color: rgba(0,255,100,1);
    }
    75% {
    color: rgba(202,255,10,1);
    }
    100% {
    color: rgba(255,200,10,1);
    }
}

.animation-light-rotate {
    color: white;
    text-shadow: 0rem 0rem 2rem rgba(255,255,0,1), .1rem 0rem 0rem #FF864B, 0rem .1rem 0rem #FF864B, -.1rem 0rem 0rem #FF864B, 0rem -.1rem 0rem #FF864B;
    animation: animation-light-rotate 7s infinite alternate;
}

@keyframes animation-light-rotate {
    0% {
    color: #FF7C7C;
    transform: rotateY(180deg);
    }
    50% {
    color: #FFF66C;
    transform: rotateY(360deg);
    }
    100% {
    color: #FFA36C;
    }
}

.animation-light2-rotate {
    color: white;
    text-shadow: 0rem 0rem 2rem rgba(20,200,200,1), .1rem 0rem 0rem rgba(20,200,200,.8), 0rem .1rem 0rem rgba(20,200,200,.6), -.1rem 0rem 0rem rgba(20,200,200,.4), 0rem -.1rem 0rem rgba(20,200,200,.2);
    animation: animation-light2-rotate 3s infinite alternate;
}

@keyframes animation-light2-rotate {
    0% {
    color: rgba(20,200,200,1);
    }
    50% {
    color: rgba(0,255,100,1);
    }
    75% {
    color: rgba(202,255,10,1);
    }
    100% {
    color: rgba(255,200,10,1);
    }
}

.animation-dark-rotate {
    color: white;
    text-shadow: 0rem 0rem 2rem rgba(25,25,20,1), .1rem 0rem 0rem rgba(25,25,20,.8), 0rem .1rem 0rem rgba(25,25,20,.6), -.1rem 0rem 0rem rgba(25,25,20,.4), 0rem -.1rem 0rem rgba(25,25,20,.2);
    animation: animation-dark-rotate 3s infinite alternate;
}

@keyframes animation-dark-rotate {
    0% {
    color: rgba(25,85,20,1);
    transform: rotateX(0deg);
    }
    50% {
    color: rgba(250,250,250,1);
    transform: rotateX(360deg);
    }
    75% {
    color: rgba(25,25,20,1);
    transform: rotateX(0deg);
    }
    100% {
    color: rgba(205,250,180,1);
    transform: rotateX(360deg);
    }
}

.anime-dark {
    color: white;
    text-shadow: 0rem 0rem 2rem rgba(25,25,20,1), .1rem 0rem 0rem rgba(25,25,20,.8), 0rem .1rem 0rem rgba(25,25,20,.6), -.1rem 0rem 0rem rgba(25,25,20,.4), 0rem -.1rem 0rem rgba(25,25,20,.2);
}

.anime-dark {
  color: rgba(25,25,20,1);
  animation: animation-dark 7s infinite alternate;
}

@keyframes animation-dark {
    0% {
    color: rgba(25,85,20,1);
    }
    50% {
    color: rgba(250,250,250,1);
    }
    100% {
    color: rgba(25,25,20,1);
    }
}
/* /クイズのアイコンのアニメーション　*/