@charset "utf-8";
/************************************************************************/
/***** ファーストビュー用CSS は index.html または style_firstview.css に 記載 *****/
/************************************************************************/
/***** imgに対する 長押しアクション を禁止(スマホ) *****/
img { -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; -moz-user-select:none; touch-callout:none; user-select:none; }
/***** /imgに対する 長押しアクション を禁止(スマホ) *****/
/***** IE11 で SVG が崩れる対策 （ 一応設定するが 基本的に IE は非対応とする ） *****/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE11 にのみ 適用 */
img[src$=".svg"] {
width: 100%;
height: auto;
}
}
/***** /IE11 で SVG が崩れる対策 （ 一応設定するが 基本的に IE は非対応とする ） *****/
/***** common *****/
svg {
fill: #000;
width: 100%;
}
.left-align { text-align: left; }
.right-align { text-align: right; }
.center-align { text-align: center; }
.view_pc { display: none!important; }
.view_sp { display: block!important; }
.dsp_none { display: none!important; }
.dsp_ib { display: inline-block!important; }
.dsp_block { display: block!important; }
.cf:after { content: ""; display: block; clear: both; }
@media only screen and (min-width: 600px) {
.view_pc { display: block!important; }
.view_sp { display: none!important; }
}
/***** /common *****/
/***** plugin custom｜lazysizes *****/
img {
transition: .3s;
}
img.lazyload {
opacity: 0;
}
img.lazyloaded {
opacity: 1;
}
/***** /plugin custom｜lazysizes *****/
/***** plugin custom｜inview *****/
.iv { opacity: 0; }
.iv.visible { animation-duration: 1.0s; animation-fill-mode: forwards; }
/***** /plugin custom｜inview *****/
/***** parts｜動画 iframe 埋め込み （YouTube） 参考 https://codepen.io/elad2412/pen/MWmbLdx *****/
/*** 読み込み前 サムネイル ***/
.mov_t {
position: relative;
}
.icon_play svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
transition: .3s;
}
.mov .icon_play:hover svg {
opacity: 0.7;
}
/*** 旧定義 ... 対応させたいブラウザの状況に合わせて 新旧どちらかを使用 ***/
/* HTML
*/
.mov {
position: relative;
margin: 0 auto;
padding-top: 56.25%;
}
.mov iframe, .mov .mov_t {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/*** 新定義 ... 対応させたいブラウザの状況に合わせて 新旧どちらかを使用 ***/
/* HTML
*/
/*
.mov {
aspect-ratio: 16 / 9;
}
.mov iframe {
width: 100%;
height: 100%;
}
*/
/***** /parts｜動画 iframe 埋め込み （YouTube） *****/
/***** parts｜original modal *****/
.modal_active header {
z-index: 1;
}
.modal_active .nav_btn {
/* filter: blur(3px);*/
}
.modal {
z-index: 1102;
display: none;
height: 100vh;
height: 100dvh;
height: -webkit-fill-available;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
transition: 1s;
}
.modal_bg {
background: rgba(var( --color_main_rgb ), 0.8);
position: absolute;
height: 100vh;
width: 100vw;
}
.modal_content {
/* position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;*/
position: relative;
padding: 1.5em;
width: 80vw;
max-width: 600px;
height: 80vh;
height: 80dvh;
height: fit-content;
display: grid;
grid-template-rows: 2em auto;
align-content: center;
/* justify-content: center;*/
background: var( --color_bg );
box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
}
.modal.active {
will-change: animation;
animation: fadeIn 0.1s linear forwards;
display: flex;
justify-content: center;
align-items: center;
}
.modal.active .modal_content {
will-change: animation;
animation: fadeInUp 0.3s linear forwards;
}
.modal_content .modal_header {
position: relative;
margin: 0 auto;
width: 100%;
text-align: center;
/* width: 90vw;
max-width: 1000px;
min-height: 3em;*/
}
/*.modal_content .modal_header img {
width: 60%;
max-width: 300px;
vertical-align: text-top;
}*/
.modal_content .modal_header .modal_close {
position: absolute;
bottom: 0;
right: 0;
color: var( --color_main );
font-size: 2em;
line-height: 1;
}
.modal_content .modal_header .modal_close:hover {
cursor: pointer;
opacity: 0.7;
}
.modal_content .modal_body {
position: relative;
margin: 0 auto;
width: 100%;
}
/*.modal_content .mov {
z-index: 2;
position: relative;
width: 90vw;
max-width: 1000px;
height: auto;
}*/
@media screen and (orientation: landscape) and (max-height: 700px) {
/* .modal_content .modal_header {
width: calc(70vh / 9 * 16);
max-width: none;
min-height: 3em;
min-height: min(10vh, 3em);
}*/
.modal_content .modal_header .modal_close {
/* font-size: min(12vh, 3em);*/
transition: none;
}
/* .modal_content .mov {
width: calc(70vh / 9 * 16);
max-width: none;
height: 70vh;
max-height: 500px;
margin: 0 auto;
}*/
}
/***** /parts｜original modal *****/
/***** parts｜form *****/
form {
display: block;
width: 100%;
margin: 0 auto;
padding: 1em 0;
}
form fieldset {
z-index: 1;
position: relative;
margin: 0 0 1em 0;
padding: 1em 0 0 0;
}
/*** input/label styles ***/
form fieldset input, form fieldset textarea {
width: 100%;
padding: 0.2em 1.2em 0;
border: 0;
border-bottom: 1px solid var( --color_main );
background-color: transparent;
font-size: 16px;
color: var(--color_text );
}
form fieldset input:disabled {
/* color: var(--color_text );*/
}
form fieldset .label {
color: var( --color_main );
font-weight: 700;
}
form fieldset .label.active {
font-size: 0.9em;
}
form fieldset .required + .label::after {
content: '（必須）';
color: var( --color_red );
font-size: 0.8em;
}
form fieldset .label span {
margin-left: 1em;
font-size: 0.8em;
}
form fieldset input:not([type="checkbox"]):not([type="radio"]) + .label,
form fieldset textarea:not([type="checkbox"]):not([type="radio"]) + .label {
z-index: -1;
position: absolute;
top: 0;
left: 0;
transition: .3s;
transform: translateX(10px) translateY(1.2em);
}
form fieldset input:not([type="checkbox"]):not([type="radio"]):focus + .label,
form fieldset input:not([type="checkbox"]):not([type="radio"]) + .label.active,
form fieldset textarea:not([type="checkbox"]):not([type="radio"]):focus + .label,
form fieldset textarea:not([type="checkbox"]):not([type="radio"]) + .label.active {
font-size: 0.9em;
transform: translateX(0) translateY(-0.3em);
}
form fieldset .attention {
position: relative;
font-size: 0.8em;
}
form fieldset .attention span {
color: var( --color_red );
}
form fieldset .attention i {
position: absolute;
top: -1.75em;
left: 0;
color: var( --color_green );
font-size: 1.5em;
}
form fieldset .attention i.ri-close-circle-line {
color: var( --color_red );
}
form fieldset .toggle_pw {
position: absolute;
right: 0;
top: 1.1em;
color: var(--color_main );
font-size: 1.2em;
}
form fieldset .block_txt {
margin-bottom: 1.2em;
}
/*** Checkboxes styles ***/
input[type="checkbox"] { display: none; }
input[type="checkbox"], input[type="checkbox"] + label {
font-size: 1.2em
}
input[type="checkbox"] + label {
display: inline-block;
position: relative;
padding-left: 1.5em;
margin: 0.5em 0;
line-height: 1;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 1.0em;
height: 1.0em;
border: 1px solid var( --color_main );
position: absolute;
left: 0;
top: 0;
opacity: .6;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 0.5em;
top: -0.25em;
left: 0.25em;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
input:checked + label{
color: var( --color_main );
}
/*** button styles ***/
form .btn {
display: block;
margin: 2em auto 0;
padding: 0.65em 0 0.5em;
width: 90%;
max-width: 250px;
border: 1px solid;
border-radius: 0.2em;
font-size: 1.1em;
line-height: 1.2;
text-align: center;
/* cursor: pointer;*/
transition: .3s;
}
form .btn.no_active {
border-color: var( --color_lightgray );
color: var( --color_lightgray );
}
form button[type="submit"] {
border-color: var( --color_main );
color: var( --color_main );
}
form button[type="submit"]:hover {
color: #fff;
background: var( --color_main );
}
/*** loading styles ***/
#loading {
position: fixed;
top: 0;
left: 0;
z-index: 2000;
width: 100%;
height: 100%;
display: none;
background: rgba(0,0,0,0.6);
}
/** type｜circle **/
/* type｜circle HTML記述
*/
.load_anime, .load_anime::before, .load_anime::after {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.load_anime::before {
content: 'Loading...';
text-align: center;
color: #fff;
font-size: 1.2em;
line-height: 150px;
animation: loading_text 1.5s infinite linear forwards reverse;
}
.load_anime::after {
content: '';
border-radius: 50%;
border-width: 3px;
border-style: solid;
border-color: var( --color_main ) rgba(var( --color_main_rgb ), 0.25) rgba(var( --color_main_rgb ), 0.25);
animation: loading_circle 1.5s infinite linear forwards;
}
@keyframes loading_circle {
0% { transform-origin: center; transform: rotate(0); }
100% { transform-origin: center; transform: rotate(360deg); }
}
@keyframes loading_text {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/** /type｜circle **/
/** type｜send_plane **/
/* type｜send_plane HTML記述
*/
/*
.load_outer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
position: relative;
width: 40%;
max-width: 120px;
}
.load_inner {
margin-top: 1.5em;
color: #fff;
font-size: 1.5em;
}
.load_inner::before {
content: '送信中...';
}
.load_outer svg {
overflow: visible;
transform: rotate(-15deg);
}
.send_plane {
fill: #fff;
}
.send_plane_body {
animation: shake 0.2s ease-in-out infinite alternate;
}
.send_line {
transform-origin: center right;
stroke-dasharray: 22;
animation: line 0.8s ease-in-out infinite;
animation-fill-mode: both;
stroke: #fff;
}
.send_line__top {
animation-delay: 0s;
}
.send_line__middle {
animation-delay: 0.2s;
}
.send_line__bottom {
animation-delay: 0.4s;
}
@keyframes shake {
0% { transform: translateY(-1%); }
100% { transform: translateY(3%); }
}
@keyframes line {
0% { stroke-dashoffset: 22; }
25% { stroke-dashoffset: 22; }
50% { stroke-dashoffset: 0; }
51% { stroke-dashoffset: 0; }
80% { stroke-dashoffset: -22; }
100% { stroke-dashoffset: -22; }
}
*/
/** /type｜send_plane **/
/***** /parts｜form *****/
/***** parts｜pagetop_btn *****/
#pagetop {
z-index: 1;
cursor: pointer;
position: fixed;
bottom: 20px;
right: 10px;
width: 60px;
bottom: min(2%, 20px);
right: min(2%, 10px);
width: min(15vw, 60px);
opacity: 0.8;
transition: .15s;
padding: 10px;
}
#pagetop:hover {
opacity: 1;
transform: scale(1.1);
}
@media only screen and (min-width: 520px){
#pagetop {
width: min(9vw, 70px);
}
}
@media only screen and (min-width: 960px){
#pagetop {
right: 20px;
right: min(20vw, 20px);
}
}
@media only screen and (min-width: 1280px){
#pagetop {
bottom: 30px;
right: calc((100vw - 1280px)/2 + 20px);
}
}
@media only screen and (max-width: 400px){
#pagetop {
bottom: 5px;
right: 5px;
padding: 7px;
}
}
/***** /parts｜pagetop_btn *****/
/***** nav *****/
/*** メニューOPEN時 エフェクト ***/
/*
.fixed_effect .header_logo,
.fixed_effect main section:first-of-type > *,
.fixed_effect main section:nth-of-type(n+2),
.fixed_effect footer > *,
.fixed_effect #pagetop,
.fixed_effect .nav_bottom li {
filter: blur(3px);
}
*/
/*** メニュー｜ボタン ***/
/** type 共通 **/
#nav_modal {
display: none;
opacity: 0;
transition: .3s;
}
#nav_modal.active {
display: block;
opacity: 1;
/* overflow-y: auto;*/
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
#nav_modal.active > div {
height: 100%;
overflow-y: auto;
}
.nav_btn,
.nav_btn span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.nav_btn {
z-index: 21;
position: absolute;
/* top: min(2vw, 20px);
right: min(4vw, 20px);*/
top: 20px;
right: 20px;
cursor: pointer;
border-radius: 50%;
transition: none;
background: rgba(255, 255, 255, .5);
}
.nav_btn.active {
display: block!important;
position: fixed;
background: rgba(255, 255, 255, 1);
}
@media only screen and (min-width: 960px){
/* .nav_btn {
top: min(20vw, 40px);
right: min(20vw, 30px);
}*/
}
@media only screen and (min-width: 1280px){
/* .nav_btn {
right: calc((100vw - 1280px)/2 + 30px);
}*/
}
@media only screen and (orientation:landscape) and (max-height: 400px) {
/* .nav_btn {
top: min(2vw, 10px);
}*/
}
/** /type 共通 **/
/** type_line **/
.nav_btn.type_line {
width: 50px;
height: 50px;
}
.nav_btn.type_line.not_active {
/* background: rgba(248, 205, 43, 0.5);*/
}
.nav_btn.type_line::before,
.nav_btn.type_line span,
.nav_btn.type_line::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
height: 4px;
border-radius: 2px;
background-color: var( --color_main );
}
.nav_btn.type_line::before {
top: 14px;
}
.nav_btn.type_line::after {
top: 23px;
}
.nav_btn.type_line span {
bottom: 14px;
}
/* メニュー｜ボタン｜開いた時 */
.nav_btn.type_line.active::before {
top: 18px;
animation: active-menu-line01 .25s forwards;
}
.nav_btn.type_line.active::after {
opacity: 0;
}
.nav_btn.type_line.active span {
top: 28px;
animation: active-menu-line02 .25s forwards;
}
@keyframes active-menu-line01 {
0% { transform: translateY(0) rotate(0); }
50% { transform: translateY(5px) rotate(0); }
100% { transform: translateY(5px) rotate(45deg); }
}
@keyframes active-menu-line02 {
0% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-5px) rotate(0); }
100% { transform: translateY(-5px) rotate(-45deg); }
}
/* メニュー｜ボタン｜閉じた時 */
.nav_btn.type_line.not_active::before {
animation: menu-line01 .25s forwards;
}
.nav_btn.type_line.not_active::after {
transition: all .1s .1s;
opacity: 1;
}
.nav_btn.type_line.not_active span {
animation: menu-line02 .25s forwards;
}
@keyframes menu-line01 {
0% { transform: translateY(5px) rotate(45deg); }
50% { transform: translateY(5px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}
@keyframes menu-line02 {
0% { transform: translateY(-5px) rotate(-45deg); }
50% { transform: translateY(-5px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}
/** /type_line **/
/** type_word **/
.nav_btn.type_word {
width: 5em;
height: 5em;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0 0.5em;
padding: 1em;
font-size: 12px;
}
.nav_btn.type_word span {
/* flex-basis: 1em;
max-width: 1em;*/
width: 1em;
height: 1em;
line-height: 1;
}
.nav_btn.type_word span:nth-of-type(1)::before {
content: 'M';
}
.nav_btn.type_word span:nth-of-type(3)::before {
content: 'N';
}
.nav_btn.type_word span:nth-of-type(4)::before {
content: 'U';
}
.nav_btn.type_word span:nth-of-type(2) {
width: calc(1em - 6px);
margin-left: 1px;
margin-right: 5px;
}
.nav_btn.type_word span:nth-of-type(2) {
height: 1px;
background: var(--color_text );
position: relative;
transform: scale(1.1);
}
.nav_btn.type_word span:nth-of-type(2)::before,
.nav_btn.type_word span:nth-of-type(2)::after {
content: "";
position: absolute;
left: 0;
right: -2px;
height: 1px;
background-color: var( --color_text );
transform: scale(1.1);
}
.nav_btn.type_word span:nth-of-type(2)::before {
top: -3px;
}
.nav_btn.type_word span:nth-of-type(2)::after {
bottom: -3px;
}
/* メニュー｜ボタン｜開いた時 */
.nav_btn.type_word.active span:nth-of-type(1),
.nav_btn.type_word.active span:nth-of-type(3),
.nav_btn.type_word.active span:nth-of-type(4) {
display: none;
}
.nav_btn.type_word.active span:nth-of-type(2) {
background: none;
}
.nav_btn.type_word.active span:nth-of-type(2)::before {
animation: active-menu-word01 .25s forwards;
}
.nav_btn.type_word.active span:nth-of-type(2)::after {
animation: active-menu-word02 .25s forwards;
}
@keyframes active-menu-word01 {
0% { transform: translateY(0) rotate(0) scale(1); }
50% { transform: translateY(3px) rotate(0) scale(1.5); }
100% { transform: translateY(3px) rotate(45deg) scale(3); }
}
@keyframes active-menu-word02 {
0% { transform: translateY(0) rotate(0) scale(1); }
50% { transform: translateY(-3px) rotate(0) scale(1.5); }
100% { transform: translateY(-3px) rotate(-45deg) scale(3); }
}
/* メニュー｜ボタン｜閉じた時 */
.nav_btn.type_word.not_active span:nth-of-type(2) {
transition: none;
}
/*
.nav_btn.type_word.not_active span:nth-of-type(2)::before {
animation: menu-bar01 .25s forwards;
}
.nav_btn.type_word.not_active span:nth-of-type(2)::after {
transition: all .1s .1s;
opacity: 1;
}
.nav_btn.type_word.not_active span:nth-of-type(2) {
animation: menu-bar02 .25s forwards;
}
@keyframes menu-bar01 {
0% { transform: translateY(5px) rotate(45deg); }
50% { transform: translateY(5px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}
@keyframes menu-bar02 {
0% { transform: translateY(-5px) rotate(-45deg); }
50% { transform: translateY(-5px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}
*/
/** /type_word **/
/*** /メニュー｜ボタン ***/
/*** メニュー｜内容 ***/
.nav_list {
z-index: 20;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
/* background: rgba(173, 102, 103, 0.8);*/
/*
background: rgba(var( --color_main_rgb ), 0.8);
transition: .5s;
*/
}
.nav_list::before {
content: "";
z-index: 1;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var( --color_deepblue );
opacity: 0.8;
}
/*
.nav_list::after {
content: "管理画面 MENU";
z-index: 1;
position: absolute;
top: min(2vw, 20px);
left: 0;
right: 0;
color: var( --color_purple );
font-size: 1.2em;
font-weight: 900;
line-height: 50px;
}
*/
.nav_list.active .nav_list_body > *:nth-of-type(1) { animation-delay: .1s; }
.nav_list.active .nav_list_body > *:nth-of-type(2) { animation-delay: .3s; }
.nav_list.active .nav_list_body > *:nth-of-type(3) { animation-delay: .5s; }
.nav_list.active .nav_list_body > *:nth-of-type(4) { animation-delay: .7s; }
.nav_list.active .nav_list_body > *:nth-of-type(5) { animation-delay: .9s; }
.nav_list.active .nav_list_body > *:nth-of-type(6) { animation-delay: 1.1s; }
.nav_list.active .nav_list_body > *:nth-of-type(7) { animation-delay: 1.3s; }
.nav_list.active .nav_list_body > *:nth-of-type(8) { animation-delay: 1.5s; }
.nav_list.active .nav_list_body > *:nth-of-type(9) { animation-delay: 1.7s; }
.nav_list.active .nav_list_body > *:nth-of-type(10) { animation-delay: 1.9s; }
.nav_list.active .nav_list_body ul li:nth-of-type(1) { animation-delay: .1s; }
.nav_list.active .nav_list_body ul li:nth-of-type(2) { animation-delay: .3s; }
.nav_list.active .nav_list_body ul li:nth-of-type(3) { animation-delay: .5s; }
.nav_list.active .nav_list_body ul li:nth-of-type(4) { animation-delay: .7s; }
.nav_list.active .nav_list_body ul li:nth-of-type(5) { animation-delay: .9s; }
.nav_list.active .nav_list_body ul li:nth-of-type(6) { animation-delay: 1.1s; }
.nav_list.active .nav_list_body ul li:nth-of-type(7) { animation-delay: 1.3s; }
.nav_list.active .nav_list_body ul li:nth-of-type(8) { animation-delay: 1.5s; }
.nav_list.active .nav_list_body ul li:nth-of-type(9) { animation-delay: 1.7s; }
.nav_list.active .nav_list_body ul li:nth-of-type(10) { animation-delay: 1.9s; }
/*** メニュー｜縦並び リスト型 ***/
.type_textlist ul {
z-index: 2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px 0.5em;
padding: min(15vw, 50px) 0.5em;
opacity: 0;
}
/*
.type_textlist ul::before {
content: "－ "attr(data-label)" －";
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 1.2em;
line-height: 1;
text-align: center;
}
*/
.type_textlist ul li {
margin: 0.5em auto;
font-size: 1.4em;
width: 100%;
opacity: 0;
}
.type_textlist ul li span {
display: inline-block;
}
.type_textlist ul li a {
display: flex;
justify-content: center;
color: var( --color_white );
}
.type_textlist ul li a:hover {
/* opacity: 0.7;*/
}
.type_textlist ul li i {
margin-right: 0.2em;
font-weight: 500;
}
/*
.type_textlist ul li:nth-of-type(n+2) {
margin-top: 0;
}
.type_textlist ul li:nth-of-type(n+2)::before {
content: "";
display: block;
background: #fff;
margin: 0 auto 1.5em;
width: 30px;
width: min(10vw, 30px);
height: 1px;
}
*/
.type_textlist > *,
.type_textlist ul::before,
.type_textlist ul li {
will-change: animation;
animation: fadeInLeft 0.5s linear forwards;
}
/*** メニュー｜アイコン型 ***/
.type_iconlist ul {
z-index: 2;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 2em 0.5em;
padding: min(10vw, 2em) 0.5em;
opacity: 0;
}
.type_iconlist ul::before {
content: "－ "attr(data-label)" －";
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 1.2em;
line-height: 1;
text-align: center;
}
.type_iconlist ul li {
padding: 1em 0;
font-size: 1.1em;
text-align: center;
width: 33.333333%;
opacity: 0;
}
/*
.type_iconlist ul li::after {
content: attr(data-label);
display: block;
margin-top: 0.3em;
font-size: 1.0rem;
line-height: 1;
}
.type_iconlist ul li span {
display: inline-block;
}
*/
.type_iconlist ul li a {
/*
display: inline-block;
color: var( --color_text );
*/
color: var( --color_main );
display: block;
margin: 0 auto;
width: 90%;
border: 1px solid;
border-radius: 0.5em;
}
.type_iconlist ul li a:hover {
/* opacity: 0.7;*/
}
.type_iconlist ul li .nav_icon i {
display: block;
margin: 0 auto 5px;
font-size: 2.5em;
/* margin: 0 auto 5px;
font-size: 2.5em;
width: 2.5em;
line-height: 2.5;
border: 1px solid;
border-radius: 50%;*/
}
.type_iconlist ul li .nav_txt {
/* width: calc(100% + 1.5em*2);
margin-left: -1.5em;*/
}
/*
.type_iconlist ul li:nth-of-type(n+4) {
margin-top: 0;
}
.type_iconlist ul li:nth-of-type(n+4)::before {
content: "";
display: block;
background: var( --color_text );
margin: 0 auto 1.5em;
width: 30px;
width: min(10vw, 30px);
height: 1px;
}
*/
.type_iconlist > *,
.type_iconlist ul::before,
.type_iconlist ul li {
will-change: animation;
animation: fadeInUp 0.5s cubic-bezier(0.42, 0.2, 0.16, 1) forwards;
}
/*** メニュー｜その他 ***/
.nav_other {
z-index: 2;
position: relative;
width: 100%;
padding: 10px 0.5em;
padding: min(5vw, 10px) 0.5em;
border-top: 1px solid var( --color_text );
font-size: 1.1em;
}
/*
.nav_list .btn {
display: block;
margin: 1em auto 0;
padding: 0.65em 0 0.5em;
width: 90%;
max-width: 250px;
border: 1px solid;
border-radius: 0.2em;
line-height: 1.2;
text-align: center;
}
*/
/*** /メニュー｜内容 ***/
/*** メニュー｜下部固定 ***/
.nav_bottom {
display: none;
/* z-index: 10;*/
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.4));
}
.nav_bottom ul {
padding: 0 2%;
display: flex;
justify-content: space-evenly;
/* justify-content: center;*/
align-items: center;
height: 50px;
background-color: var( --color_deepblue );
}
.nav_bottom li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
/*
border-top-left-radius: 100%;
border-top-right-radius: 100%;
background-color: #fff;
top: 1px;
left: 0;
width: 60px;
width: 16%;
*/
min-width: 30px;
height: 50px;
text-align: center;
line-height: 1;
color: var( --color_main );
}
.nav_bottom a {
color: inherit;
}
.nav_bottom .nav_icon {
font-weight: 500;
font-size: 1.4em;
}
.nav_bottom.view_label .nav_icon::after {
content: attr(data-label);
display: block;
margin-top: 0.3em;
font-size: 1.0rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
}
.nav_bottom .modal_menu {
transition: .3s;
}
.nav_bottom .modal_menu:hover {
cursor: pointer;
opacity: 0.7;
}
.nav_bottom .pickup {
height: 60px;
top: -1rem;
}
.nav_bottom .pickup::before, .nav_bottom .pickup::after {
position: absolute;
content: "";
width: 13px;
height: 13px;
border-bottom: 4px solid #fff;
top: 8px;
}
.nav_bottom .pickup:before {
border-bottom-right-radius: 100%;
left: -5px;
}
.nav_bottom .pickup:after {
border-bottom-left-radius: 100%;
right: -5px;
}
.nav_bottom .pickup .nav_icon {
font-size: 1.7em;
}
/*.nav_bottom .nav_txt {
font-size: 0.8em;
display: none;
}*/
@media only screen and (max-width: 519px){
.nav_bottom {
display: block;
}
}
/*** /メニュー｜下部固定 ***/
/***** /nav *****/
/***** section｜共通部分 *****/
/*** フレーム ***/
main > section:not(#main_visual) {
}
main > section {
position: relative;
}
.container {
position: relative;
margin: 0 auto;
}
main > section:not(#main_visual),
.container {
padding: var( --padding_content );
}
@media only screen and (min-width: 520px){
.container {
max-width: 1200px;
}
}
@media only screen and (min-width: 1300px){
main > section:not(#main_visual) {
padding: var( --padding_content ) calc(var( --padding_content ) - 1em);
}
}
@media only screen and (max-width: 519px){
}
@media only screen and (max-width: 450px) {
}
/*** /フレーム ***/
/*** section｜title ***/
.title_block {
margin: 0 auto 2em;
max-width: 1200px;
text-align: center;
}
.list_block + .title_block {
margin: 100px auto 0;
margin: min(15vw, 100px) auto 0;
}
.title {
position: relative;
margin-top: 0.2em;
font-size: 1.5em;
font-size: min(5vw, 1.5em);
font-weight: 900;
line-height: 1.5;
}
.title[data-en]:not([data-en=""])::after {
content: "－ "attr(data-en)" －";
display: block;
font-size: 0.6em;
font-weight: 500;
}
.lead {
margin: 1.5em auto 3em;
line-height: 1.8;
}
.lead span {
display: inline-block;
}
@media only screen and (max-width: 519px){
}
@media only screen and (max-width: 400px){
.lead {
margin: 2em auto 3em;
font-size: 0.85em;
}
}
/*** /section｜title ***/
/*** section｜list_block ***/
.list_block {
justify-content: center;
padding: 0 2em;
padding: 0 min(3vw, 2em);
}
.list_block .block_title {
font-size: 1.2em;
font-weight: 700;
line-height: 1.8;
}
.list_block .block_title span {
position: relative;
display: inline-block;
line-height: 1.5;
}
.list_block.type_list article {
margin: 1.5em auto;
}
.list_block.type_list a {
display: flex;
}
.list_block.type_list .block_img {
width: 20%;
}
.list_block.type_list .block_txt {
width: 100%;
}
.list_block.type_list .block_img + .block_txt {
padding-left: 1em;
width: 80%;
}
.list_block.type_list .block_txt .block_topic {
font-size: 1.1em;
}
.list_block.type_list .block_txt .block_date {
font-size: 0.7em;
}
/*.list_block .block_link {
word-break: break-all;
}*/
/*** /section｜list_block ***/
/*** /section｜contents_block ***/
.contents_block {
margin: 5rem auto 0;
}
.contents_block .block_topic {
margin-bottom: 1em;
font-size: 1.5em;
font-weight: 900;
border-bottom: 1px solid;
}
/*** /section｜contents_block ***/
/*** 追加読み込み block ***/
.btn_more {
z-index: 2;
position: relative;
margin: 4em auto 0;
padding: 1em 0 0.9em;
color: var( --color_main );
/* background: var( --color_white );*/
border: 1px solid var( --color_main );
border-radius: 0.5em;
text-align: center;
font-size: 1.1em;
font-weight: 700;
line-height: 1;
width: 60%;
max-width: 200px;
transition: .3s;
}
.btn_more:hover {
background: var( --color_main );
color: var( --color_white );
cursor: pointer;
}
/*** /追加読み込み block ***/
/***** /section｜共通部分 *****/
/***** TOP｜section *****/
:root {
--section_border_width: 40px; /* var( --section_border_width ) */
}
/*
main#top > section:nth-of-type(n+2) {
padding-bottom: calc(var( --padding_content ) + var( --section_border_width ));
}
*/
/*
main#top > section:nth-of-type(2n+1) {
background: var( --color_bg );
}
main#top > section:nth-of-type(2n) {
background: var( --color_white );
}
main#top > section:nth-of-type(2) {
margin-top: -15%;
}
main#top > section:nth-of-type(n+2) .container {
padding: calc(var( --padding_content ) + 4em) 0;
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+1) {
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+2) {
-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+3) {
}
main#top > section:nth-of-type(n+2):nth-of-type(4n) {
-webkit-clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
}
main#top > section:last-of-type {
-webkit-clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%)!important;
clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%)!important;
}
main#top > section:last-of-type .container {
padding-bottom: calc(var( --padding_content ) + 2em);
}
main#top > section.bg_img {
background-position: center;
background-size: cover;
}
*/
/*
main#top > section::before,
main#top > section::after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
main#top > section::before {
top: calc(-1 * var( --section_border_width ));
}
main#top > section::after {
bottom: 0;
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+2)::before {
border-width: var( --section_border_width ) 0 0 100vw;
border-color: transparent transparent transparent var( --color_white );
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+2)::after {
border-width: var( --section_border_width ) 0 0 100vw;
border-color: var( --color_white ) transparent transparent transparent;
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+3)::before {
border-width: var( --section_border_width ) 0 0 100vw;
border-color: transparent transparent transparent var( --color_bg );
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+3)::after {
border-width: 0 0 var( --section_border_width ) 100vw;
border-color: transparent transparent transparent var( --color_bg );
}
main#top > section:nth-of-type(n+2):nth-of-type(4n)::before {
border-width: 0 0 var( --section_border_width ) 100vw;
border-color: transparent transparent var( --color_white ) transparent;
}
main#top > section:nth-of-type(n+2):nth-of-type(4n)::after {
border-width: 0 0 var( --section_border_width ) 100vw;
border-color: transparent transparent transparent var( --color_white );
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+1)::before {
border-width: var( --section_border_width ) 100vw 0 0;
border-color: transparent var( --color_bg ) transparent transparent;
}
main#top > section:nth-of-type(n+2):nth-of-type(4n+1)::after {
border-width: var( --section_border_width ) 100vw 0 0;
border-color: var( --color_bg ) transparent transparent transparent;
}
*/
/***** /TOP｜section *****/
/***** section｜intro *****/
#intro {
}
#intro .container {
}
@media only screen and (min-width: 451px) {
}
@media only screen and (max-width: 519px) {
}
@media only screen and (max-width: 400px) {
}
@media only screen and (max-width: 374px) {
}
/***** /section｜intro *****/
/***** section｜contents *****/
@media only screen and (max-width: 400px){
}
/***** /section｜contents *****/
/***** section｜access *****/
.access_tbl {
margin: 2em auto 0;
display: table;
text-align: left;
}
.access_tbl li {
margin-top: 1em;
}
.access_tbl li:first-of-type {
margin-top: 1em;
}
.access_tbl li::before {
display: table-cell;
content: attr(data-th)"：";
/* padding-right: 0.5em;*/
width: 6.0em;
}
.access_tbl li.word3::before {
letter-spacing: 0.48em;
}
.access_tbl li span {
display: table-cell;
}
@media only screen and (max-width: 400px){
}
/***** /section｜access *****/
/***** section｜contact *****/
.qr {
margin: 0 auto;
width: 40%;
max-width: 150px;
}
@media only screen and (max-width: 400px){
}
/***** /section｜contact *****/
/***** section｜search *****/
/*
#search form {
padding: 0;
}
.search_box {
display: flex;
}
.search_box input {
width: 80%;
}
.search_box .btn {
margin-top: 0;
margin-left: 5px;
width: calc(20% - 5px);
}
*/
/*
.search_box button[type="submit"] {
border-color: var( --color_green );
color: var( --color_green );
}
.search_box button[type="submit"]:hover {
color: #fff;
background: var( --color_green );
}
*/
/***** /section｜search *****/
/***** section｜policy *****/
#policy .contents_block {
margin: 5rem auto 0;
width: 90%;
max-width: 1000px;
color: var( --color_bg );
}
#policy .contents_block .block_topic {
margin-bottom: 1em;
font-size: 1.5em;
font-weight: 900;
border-bottom: 1px solid;
}
#policy .contents_block p + ol {
margin-top: 1.5em;
}
#policy .contents_block a {
text-decoration: underline;
}
#policy .contents_block a:hover {
/* opacity: 0.7;*/
}
#policy .contents_block ol {
counter-reset: li;
}
#policy .contents_block li {
position: relative;
padding-left: 3em;
margin-bottom: 1em;
list-style: none;
}
#policy .contents_block li::before {
position: absolute;
top: 0;
left: 0;
font-weight: 900;
counter-increment: li;
content: '（'counter(li)'）';
}
/***** /section｜policy *****/
/***** footer *****/
footer {
/* margin-top: 5%;*/
padding: 5% 5% 40px;
padding: 5% 5% min(4%, 40px);
line-height: 1.5;
letter-spacing: normal;
text-align: center;
color: #fff;
background: var( --color_black );
}
footer.padbtm_nav {
padding-bottom: calc( min(5%, 50px) + 50px );
}
footer .banner {
margin: 10vw auto;
background: #fff;
}
footer .banner a:hover {
/* opacity: 0.7;*/
}
footer .txt {
font-size: 0.9em;
font-weight: 700;
}
footer .banner + .txt {
padding-top: 4%;
}
footer .policy {
margin: 3em auto;
}
footer .policy a:hover {
/* opacity: 0.7;*/
}
footer .go_info {
margin-top: 3em;
}
footer .go_info div {
margin: 1em auto;
}
.copyrights {
padding: 1.0em 0;
font-size: 0.7em;
font-weight: 700;
}
@media only screen and (min-width: 520px) {
footer.padbtm_nav {
padding-bottom: min(4%, 40px);
}
footer .banner {
margin: 50px auto;
margin: min(12%, 50px) auto;
width: 80%;
max-width: 800px;
}
}
/***** /footer *****/