/*********************************************************************
 サイト共通設定
*********************************************************************/

/* カラー 設定
====================================================================*/
:root{
 --site-main-color: #3551a2;
 --site-sub-color: #5a77c9;
 --site-txt-color: #383d41;
 --site-txt-sub-color: #5b646a;
 --site-bg-color: #e2e4e6;
 --site-bor-color: #d6d8db;
 
 --success-txt-color: #155724;
 --success-bg-color: #d4edda;
 --success-bor-color: #c3e6cb;
 
 --warning-txt-color: #856404;
 --warning-bg-color: #fff3cd;
 --warning-bor-color: #ffeeba;
 
 --danger-txt-color: #721c24;
 --danger-bg-color: #f8d7da;
 --danger-bor-color: #f5c6cb;
 
 --valid-txt-color: #2FAC35;
 --valid-bg-color: #d5eed6;
 --valid-bor-color: #abddae;
 
 --invalid-txt-color: #E04343;
 --invalid-bg-color: #f8d9d9;
 --invalid-bor-color: #f2b3b3;
}

/* CSSリセット
====================================================================*/
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}body{margin:0;}main{display:block;}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;}ul,ol{margin:0;padding:0;list-style:none;}dt{font-weight:bold;}dd{margin-left:0;}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit;}pre{font-family:monospace,monospace;font-size:inherit;}address{font-style:inherit;}a{background-color:transparent;text-decoration:none;color:inherit;}abbr[title]{text-decoration:underlinedotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:inherit;}small{font-size:80%;}sub,sup{font-size:60%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}svg,img,embed,object,iframe{vertical-align:bottom;}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit;}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}[type="radio"]{-webkit-appearance:radio;appearance:radio;}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default;}:-moz-focusring{outline:auto;}select:disabled{opacity:inherit;}option{padding:0;}fieldset{margin:0;padding:0;min-width:0;}legend{padding:0;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}label[for]{cursor:pointer;}details{display:block;}summary{display:list-item;cursor:pointer;}summary::-webkit-details-marker{display: none;}[contenteditable]:focus{outline:auto;}table{border-collapse:collapse;border-color:inherit;}caption{text-align:left;}td,th{vertical-align:top;padding:0;}th{text-align:left;font-weight:bold;}


/* サイト構成 設定
====================================================================*/
html{
 min-width: 352px;
 height: 100%;
 font-size: 62.5%;
}
body{
 height: 100%;
 font-family: "open sans","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","YuGothic Medium","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
 font-size: 1.6rem;
 font-size: clamp(1.6rem, 1vw, 1.8rem);
 line-height: 1.6;
 color: var(--site-txt-color);
 font-weight: 300;
 letter-spacing: calc(1px - .0625em);
 font-feature-settings: "palt" 1;
 font-kerning: auto;
 background-color: var(--site-bg-color);
}

a,a >*,a:before,a:after{
 transition: .3s ease-in-out;
}

/* ------ 大枠 ------ */
.container{
 padding-top: env(safe-area-inset-top, 20px); /* セーフエリア：上 */
 padding-right: env(safe-area-inset-right, 1em); /* セーフエリア：右 */
 padding-left: env(safe-area-inset-left, 1em); /* セーフエリア：左 */
 padding-bottom: env(safe-area-inset-bottom, 44px); /* セーフエリア：下 */
 height: 100%;
}

/* ------ 内枠 ------ */
.wrap{
 width: 100%;
 margin: 0 auto;
}
@media screen and (min-width: 576px){
.wrap{
 max-width: 780px;
}
}@media screen and (min-width: 768px){
.wrap{
 max-width: 960px;
}
}@media screen and (min-width: 992px){
.wrap{
 max-width: 1140px;
}
}@media screen and (min-width: 1200px){
.wrap{
 max-width: 1320px;
}
}@media screen and (min-width: 1400px){
.wrap{
 max-width: 1500px;
}
}

/* 表示 設定
====================================================================*/
.sp{display: block!important;}
.tablet{display: none;}
.pc{display: none;}
@media screen and (min-width: 957px){
.sp{display: none;}
.tablet{display: block!important;}
.pc{display: none;}
}@media screen and (min-width: 1025px){
.sp{display: none;}
.tablet{display: none;}
.pc{display: block!important;}
}


/* ヘッダー 設定
====================================================================*/
.header{
 width: 100%;
 background-color: #FFF;
}
.header-in{
 display: flex;
 justify-content: space-between;
 align-items: center;
}

/* ------ キャッチフレーズ・ロゴ ------ */
.tagline{
}
.logo{
 width: 250px;
 padding: 16px 8px 16px 16px;
}
@media only screen and (max-width: 767px){
.tagline{
 display: none;
}
.logo{
 width: 250px;
 padding: 8px;
}
}

/* ------ グローバルメニュー ------ */
@media only screen and (max-width: 767px){
.navi{
 position: fixed;
 top: 66px;
 right: -100%;
 width: 100%;
 background-color: #FFF;
 z-index: 101;
 transition: .3s ease-in-out;
}
.navi-in{
 padding-bottom: 48px
}
.navi li{
 border-bottom: var(--site-bor-color) solid 1px;
}
.navi li a{
 position: relative;
 display: block;
 height: 48px;
 padding: 0 32px 0 16px;
 line-height: 48px;
}
.navi li a:after{
 position: absolute;
 content: "";
 top: 50%;
 right: 16px;
 width: 12px;
 height: 12px;
 border-top: var(--site-txt-color) solid 2px;
 border-right: var(--site-txt-color) solid 2px;
 transform: rotate(45deg) translateX(-50%) translateY(-50%);
}
.navi li a:hover{
 background-color: var(--site-bg-color);
}

/* ハンバーガーボタン */
.hamburger{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 48px;
 height: 48px;
 cursor: pointer;
}
.hamburger span{
 position: relative;
}
.hamburger span:before,
.hamburger span:after{
 position: absolute;
 content: "";
 transition: .3s ease-in-out;
}
.hamburger span,
.hamburger span:before,
.hamburger span:after{
 width: 26px;
 height: 4px;
 background-color: var(--site-txt-color);
 border-radius: 50vw;
}
.hamburger span:before{
 top: -10px;
}
.hamburger span:after{
 bottom: -10px;
}
/* 背景 */
.gnav_bg{
 position: fixed;
 top: 64px;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0,0,0,.25);
 cursor: pointer;
 z-index: 100;
}
/* アクティブ時 */
.navi.active{
 right: 0;
}
.hamburger.active span:before{
 top: 0;
 transform: rotate(45deg);
}
.hamburger.active span{
 background-color: #FFF
}
.hamburger.active span:after{
 bottom: 0;
 transform: rotate(-45deg);
}
}
@media only screen and (min-width: 768px){
/* ------ グローバルメニュー ------ */
.navi ul{
 display: flex;
 align-items: center;
 justify-content: flex-end;
 margin-right: 16px;
}
.navi li:not(:first-child){
 border-left: var(--site-bor-color) solid 1px;
}
.navi li a{
 position: relative;
}
.navi li a::after{
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 height: 1px;
 width: 100%;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;
}
.navi li a:hover::after{
 transform: scaleX(1);
}
}


/* パンくず 設定
====================================================================*/
.breadcrumb{
 display: flex;
 align-items: center;
 gap: 24px;
 margin: 0 auto;
 overflow-x: auto;
 word-break: keep-all;
 white-space: nowrap;
}
.breadcrumb-item{
 position: relative;
}
.breadcrumb-item:first-child{
 display: flex;
 align-items: center;
 gap: 4px;
}
.breadcrumb-item:not(:last-child):after{
 position: absolute;
 content: "";
 top: 50%;
 right: -16px;
 width: 8px;
 height: 8px;
 border-top: var(--site-txt-color) solid 1px;
 border-right: var(--site-txt-color) solid 1px;
 transform: translateY(-50%) rotate(45deg);
}


/* ------ スクロールバー ------ */
.breadcrumb::-webkit-scrollbar{
 width: 10px;
 height: 10px;
}
.breadcrumb::-webkit-scrollbar-track{
 border-radius: 10px;
 box-shadow: inset 0 0 6px rgba(0,0,0,.1);
}
.breadcrumb::-webkit-scrollbar-thumb{
 background-color: rgba(0,0,50,.5);
 border-radius: 10px;
 box-shadow:0 0 0 1px rgba(255,255,255,.3);
}


/* コンテンツ 設定
====================================================================*/
.content-in{
 display: grid;
 grid-template-columns: minmax(0,auto);
 grid-template-rows: 100px auto 250px;
 grid-column-gap: 0;
 grid-row-gap: 16px;
 flex: 1;
 padding: 16px 0;
}
.content-in.no-ads{
 display: block!important;
}
.content-left{ grid-area: 1 / 1 / 2 / 2; }
.main{
 grid-area: 2 / 1 / 3 / 2;
 background: #FFF;
 padding: 24px 8px;
}
.content-in.no-ads .main{
 max-width: 928px;
 margin: 0 auto;
}
.content-right{ grid-area: 3 / 1 / 4 / 2; }
@media screen and (min-width: 576px){
.content-in{
 grid-row-gap: 20px;
 padding: 20px 0;
}
}@media screen and (min-width: 768px){
.content-in{
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: auto 250px;
 grid-column-gap: 24px;
 grid-row-gap: 24px;
 padding: 24px 0;
}
.content-left{ grid-area: 2 / 1 / 3 / 2; }
.main{
 grid-area: 1 / 1 / 2 / 3;
 padding: 32px 16px;
}
.content-right{ grid-area: 2 / 2 / 3 / 3; }
}@media screen and (min-width: 992px){
.content-in{
 grid-column-gap: 28px;
 grid-row-gap: 28px;
 padding: 28px 0;
}
}@media screen and (min-width: 1200px){
.content-in{
 grid-column-gap: 32px;
 grid-row-gap: 0;
 padding: 32px 0;
}
}@media screen and (min-width: 1400px){
.content-in{
 grid-template-columns: 160px 1fr 160px;
 grid-template-rows: auto;
 grid-column-gap: 36px;
}
.content-left{ grid-area: 1 / 1 / 2 / 2; }
.main{
 grid-area: 1 / 2 / 2 / 3;
 padding: 40px 24px;
}
.content-right{ grid-area: 1 / 3 / 2 / 4; }
}

/* メインコンテンツ */
.article > *:not(:first-child){
 margin-top: 32px;
}
.article-content > *:not(:first-child){
 margin-top: 16px;
}
@media screen and (min-width: 576px){
}@media screen and (min-width: 768px){
.article > *:not(:first-child){
 margin-top: 40px;
}
.article-content > *:not(:first-child){
 margin-top: 24px;
}
}@media screen and (min-width: 992px){
}@media screen and (min-width: 1200px){
.article > *:not(:first-child){
 margin-top: 48px;
}
.article-content > *:not(:first-child){
 margin-top: 32px;
}
}@media screen and (min-width: 1400px){
}


/* フッター 設定
====================================================================*/
.footer{
 position: sticky; /*【下部固定:必須】*/
 top: 100vh;
 width: 100%;
 background: var(--site-txt-sub-color);
}
.footer-in{
 padding: 24px 8px;
}
.footer-in > *:not(:first-child){
 margin-top: 24px;
}
@media screen and (min-width: 576px){
}@media screen and (min-width: 768px){
.footer-in{
 padding: 32px 16px;
}
}@media screen and (min-width: 992px){
}@media screen and (min-width: 1200px){
.footer-in{
 padding: 40px 24px;
}
}@media screen and (min-width: 1400px){
}


/* ------ フッター：ナビ ------ */
.navi-footer ul{
 display: flex;
 justify-content: center;
 align-items: center;
}
.navi-footer li{
 padding: 0 8px;
}
.navi-footer li:not(:first-child){
 border-left: #FFF solid 1px;
}
.navi-footer li a{
 position: relative;
 color: #FFF;
}
.navi-footer li a::after{
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 height: 1px;
 width: 100%;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;
}
.navi-footer li a:hover::after{
 transform: scaleX(1);
}


/* ------ コピーライト ------ */
.copyright{
 display: grid;
 place-items: center;
 padding: 24px 8px;
 color: #FFF;
 font-size: 1.4rem;
 font-size: clamp(1.4rem, 1vw, 1.6rem);
 background: var(--site-txt-color);
}


/* 見出し 設定
====================================================================*/
.content h1,.content .h1,.content h2,.content .h2,.content h3,.content .h3,.content h4,.content .h4,.content h5,.content .h5,.content h6,.content .h6{
 font-weight: 700;
}

/* ------ h1（article-title） ------ */
.article-title{
 font-size: 2.6rem;
 font-size: clamp(2.6rem, 1vw, 3.0rem);
}
@media screen and (min-width: 768px){
.article-title{
 font-size: 2.8rem;
 font-size: clamp(2.8rem, 1vw, 3.2rem);
}
}

/* ------ h2（article-title） ------ */
h2{
 font-size: 2.2rem;
 font-size: clamp(2.2rem, 1vw, 2.6rem);
}
@media screen and (min-width: 768px){
h2{
 font-size: 2.4rem;
 font-size: clamp(2.4rem, 1vw, 2.8rem);
}
}

/* ------ h3・h4・h5・h6 ------ */
h3,h4,h5,h6{
 font-size: 1.8rem;
 font-size: clamp(1.8rem, 1vw, 2rem);
}
@media screen and (min-width: 768px){
h3,h4,h5,h6{
 font-size: 2rem;
 font-size: clamp(2rem, 1vw, 2.2rem);
}
}


/* 画像・アイコン 設定
====================================================================*/
img{
 max-width: 100%;
 height: auto;
}
svg{
 fill: var(--site-txt-color);
}


/* リンク 設定
====================================================================*/
.link{
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: #1558d6;
 text-decoration: underline;
}
.link svg{
 fill: #1558d6;
}
.link[target='_blank']:after{
 display: inline-block;
 content: "";
 width: 14px;
 height: 14px;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231558d6' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E") no-repeat center center / 14px 14px;
}
.link:hover{
 color: #0a2c6b;
}
.link:hover svg{
 fill: #0a2c6b;
}
.link[target='_blank']:hover:after{
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230a2c6b' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E") no-repeat center center / 14px 14px;
}


/* ボタン 設定
====================================================================*/
.btn{
 display: grid;
 place-items: center;
 grid-auto-flow: column;
 font-weight: bold;
 line-height: normal;
 cursor: pointer;
}
.btn.default{
 border: var(--site-bor-color) solid 2px;
 background-color: #FFF;
}
.btn.default:hover{
 background-color: var(--site-bg-color);
}

/* ------ 送信・検索 ------ */
.btn.submit{
 color: #FFF;
 border: #19446e solid 2px;
 background-color: #20558a;
}
.btn.submit svg{
 fill: #FFF;
}
.btn.submit:hover{
 background-color: #19446e;
}

/* ------ 操作・更新 ------ */
.btn.edit{
 color: #FFF;
 border: var(--site-sub-color) solid 2px;
 background-color: var(--site-sub-color);
}
.btn.edit svg{
 fill: #FFF;
}
.btn.edit:hover{
 border: var(--site-main-color) solid 2px;
 background-color: var(--site-main-color);
}


/* フォーム 設定
====================================================================*/

/* ------ 入力 ------ */
input[type="text"],input[type="password"],input[type="search"],input[type="url"],input[type="email"],input[type="datetime"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime-local"],input[type="number"],input[type="range"],input[type="color"],input[type="tel"]{
 display: inline-block;
 height: 40px;
 padding: 0 8px;
 vertical-align: middle;
 background: #FFF;
 border: var(--site-bor-color) solid 1px;
 border-radius: 4px;
 -webkit-user-select: text;
 outline: none;
}

/* ------ 検索 ------ */
input[type="search"]::-webkit-search-cancel-button{
 width: 18px;
 height: 24px;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23383d41' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") no-repeat center center / 18px 24px;
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

/* ------ 日付 ------ */
input[type="date"],input[type="month"]{
 cursor: text;
}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator{
 width: 18px;
 height: 20px;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23383d41' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E") no-repeat center center / 18px 20px;
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}



/* ------ ラジオ・チェックボックス ------ */
input[type="radio"],
input[type="checkbox"]{
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
}

/* ------ ファイル ------ */
input[type="file"]{
 display: block;
 vertical-align: middle;
}

/* ------ セレクト ------ */
select{
 display: inline-block;
 height: 38px;
 padding: 0 32px 0 8px;
 vertical-align: middle;
 border: var(--site-bor-color) solid 1px;
 border-radius: 4px;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23383d41' viewBox='0 0 448 512'%3E%3Cpath d='M384 480c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0zM224 352c-6.7 0-13-2.8-17.6-7.7l-104-112c-6.5-7-8.2-17.2-4.4-25.9s12.5-14.4 22-14.4l208 0c9.5 0 18.2 5.7 22 14.4s2.1 18.9-4.4 25.9l-104 112c-4.5 4.9-10.9 7.7-17.6 7.7z'/%3E%3C/svg%3E") no-repeat right 8px center / 18px 20px;
 white-space: nowrap;
 text-overflow: ellipsis;
 cursor: pointer;
 outline: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
select::-ms-expand{ /* セレクト:IE用 */
 display: none;
}
select[multiple]{ /* セレクト:複数 */
 height: auto;
 padding: 0 32px 0 8px;
 background-image: none;
}
select[multiple] option{
 padding: 8px 16px;
}

/* ------ テキストエリア ------ */
textarea{
 display: inline-block;
 width: 100%;
 padding: 8px 16px;
 vertical-align: middle;
 background: #FFF;
 border: var(--site-bor-color) solid 1px;
 border-radius: 4px;
 resize: vertical;
 line-height: 1.25;
 outline: none;
}

/* ------ ボタン ------ */
button,input[type="button"],input[type="submit"]{
 cursor: pointer;
}

/* ------ 無効 ------ */
input[type="text"]:disabled,input[type="password"]:disabled,input[type="search"]:disabled,input[type="url"]:disabled,input[type="email"]:disabled,input[type="datetime"]:disabled,input[type="date"]:disabled,input[type="month"]:disabled,input[type="week"]:disabled,input[type="time"]:disabled,input[type="datetime-local"]:disabled,input[type="number"]:disabled,input[type="range"]:disabled,
input[type="color"]:disabled,input[type="tel"]:disabled,select:disabled,option:disabled,textarea:disabled{
 color: var(--site-txt-color) !important;
 background: var(--site-bg-color) !important;
 -webkit-text-fill-color: var(--site-txt-color) !important;
 -webkit-opacity: 1 !important;
}
button:disabled,input[type="button"]:disabled,input[type="submit"]:disabled{
 cursor: default !important;
}

/* ------ プレースホルダー ------ */
:placeholder-shown{color: var(--site-txt-sub-color);}
::-webkit-input-placeholder{color: var(--site-txt-sub-color);}
::-moz-placeholder{color: var(--site-txt-sub-color); opacity: 1;}
:-ms-input-placeholder{color: var(--site-txt-sub-color);}


/* 広告 設定
====================================================================*/
.content-left-ad,.article-ad,.content-right-ad{
 display: flex;
 justify-content: center;
}

/* アイコン 設定
====================================================================*/

/* シェア・フォローボタン */
.sns-follow,.sns-share{
 display: flex;
 align-items: center;
 gap: 8px;
}
.sns-follow{
 justify-content: center;
}
.sns-share{
 justify-content: flex-end;
 margin-top: 12px;
 padding-top: 12px;
 border-top: var(--site-bor-color) solid 1px;
}
.sns-follow a:hover,.sns-share a:hover{
 opacity: .75;
}
.sns-follow .twitter svg,
.sns-follow .instagram svg{
 fill: #FFF;
}
.sns-share .twitter svg{
 fill: #0F1419;
}
.sns-share .facebook svg{
 fill: #1877f2;
}
.sns-share .hatena svg{
 fill: #01A5DF;
}
.sns-share .line svg{
 fill: #00B900;
}
.sns-share .getpocket svg{
 fill: #EF4157;
}
.sns-share .instagram svg{
 fill: #0F1419;
}

/* URLコピー */
.copy-url{
 padding: 4px 8px;
 border: var(--site-bor-color) solid 1px;
 border-radius: 4px;
}
.copy-url-msg{
 display: none;
 position: fixed; 
 top: 50%;
 left: 50%;
 padding: 8px 16px;
 color: #FFF;
 background: var(--site-txt-color);
 border-radius: 4px;
 transform:translateX(-50%)translateY(-50%);
 z-index: 999;
}


/* トップに戻る 設定
====================================================================*/
.page-top{
 grid-auto-flow: dense;
 height: 48px;
 color: #FFF;
 background: var(--site-sub-color);
}
.page-top:before{
 content: "";
 width: 12px;
 height: 12px;
 border-top: #FFF solid 3px;
 border-right: #FFF solid 3px;
 transform: translateY(6px) rotate(-45deg);
}
.page-top:hover{
 background: var(--site-main-color);
}