@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 1000
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/* CSS Document */
body {font-size: clamp(7px,0.938vw,18px);font-family: 'Noto Sans JP', sans-serif;font-weight: bold;margin: 0 auto;padding: 0;line-height: 1.8;-webkit-text-size-adjust: 100%;position: relative;color: var(--base-blue1);letter-spacing: 0;inline-size: min(1920px,100%);background-color: #fff;}
html {scroll-behavior: smooth;}
:target { scroll-margin-top: var(--h-size);}
main {inline-size: 100%;overflow: hidden;margin-block-start: var(--h-size);}
main.popup {margin-block-start: 0;font-size: 1.693em;}
section {inline-size: 100%;position: relative;z-index: 1;}
img {border: none;vertical-align: middle;height: auto;}
a {text-decoration: none;cursor: pointer;display: block;}
ol,ul {padding-inline-start: 0;}
ol li,ul li{list-style-type: none;}
dd {margin-inline-start: 0;}
dl {margin-block: 0;}
em {font-style: normal;}
address {font-style: normal;}
*, *:before, *:after {box-sizing: border-box;}
/* チェック用 未入力時ハイライト*/
/* img[alt=""] { outline: 3px solid #c143c5; } */
/* a[href=""] { outline: 3px solid #b3fff8; }  */
/********************************* float **********************************************/
.c-both {clear: both;}
.left,.in_left {float: left;}
.right,.in_right {float: right;}
.center {display: block;margin-inline: auto;text-align: center;}
.table , .in_table {display: table;}
.table > dt,.table > dd ,.in_table > dt,.in_table > dd{display: table-cell;}
/************* display *************/
.flex,.in_flex {display: flex;justify-content: space-between;flex-wrap: wrap;}
.re_flex {flex-direction: row-reverse;}
.db {display: block;}
.dib {display: inline-block;}
.df {display: flow-root;}
/************************************** inline-size ****************************************/
.inner {inline-size: min(1780px,92.70833%);margin-inline: auto;}
.middle_inner {inline-size: min(1560px,81.25%);margin-inline: auto;}
.lower_inner {inline-size: min(1280px,66.6667%);margin-inline:auto;}
.heading {inline-size: 100%;}
.half {inline-size: 50%;}
.sp {display: none;}
.pc {display: block;}
.ofh {overflow: hidden;}
.left_side,.right_side{inline-size:48%;}
/**************************************position**************************************/
.pr {position: relative;}
.pa {position: absolute;}
.pf {position: fixed;}
.vat {vertical-align: top;}
.vab {vertical-align: bottom;}
.vam {vertical-align: middle;}
.tal {text-align: left;}
.tar {text-align: right;}
.tac {text-align: center;}
/************************************ color *******************************************/
:root {
--base-blue1: #005a99;
--base-l_blue1: #ebf6fe;
--base-l_blue2: #d6e9f7;
--base-yellow1: #fffdd2;
--base-yellow2: #fcef6f;
--h-size: 6.125em;
--list-size1 : 31%;
--list-size2 : 35.5%;
}
.size1 {inline-size: var(--list-size1);}
.size2 {inline-size: var(--list-size2);}
.size3 {inline-size:calc(100% - calc(var(--list-size1) + var(--list-size2)));}
/*黒*/
.bk {color: #000;}
.bk_bg {background-color: #000;}
.bk2_bg {background-color: #3b3b3b;}
/*白*/
.wh {color: #FFF;}
.wh_bg {background-color: #FFF;}
/*　青　*/
.bl1 {color: var(--base-blue1);}
.bl1_bg {background-color: var(--base-blue1);}
.lbl1_bg {background-color: var(--base-l_blue1);}

.bl_g1_bg {background: linear-gradient(90deg ,#1890d9 , #017acc);}

/* 黄 */
.ye1_bg {background-color: var(--base-yellow1);}
.ye2 {color: var(--base-yellow2);}
.ye2_bg {background-color: var(--base-yellow2);}

a {opacity: 1;transition: all 0.25s}
span.error { display: block; color: #F03; font-size: 0.8em; }
/*************************************** font ****************************************/
.fb {font-weight:    bold;}
.f5 {font-weight: 500;}
.fn {font-weight: normal;}
.itl {font-style: italic;}
.rbt {font-family: "Roboto", sans-serif;}
.noto {font-family: "Noto Sans JP", sans-serif;}
/************************************* js ****************************************/
.fade {opacity: 0;transition: all 1s;}
.fade.active {opacity: 1;}
.fade_in {opacity: 0;transition: all 1s;transform: translateY(2rem);}
.fade_in.active {opacity: 1;transform: translateY(0);}
.d025s {transition-delay: 0.25s !important;}
.d05s {transition-delay: 0.5s !important;}
.d075s {transition-delay: 0.75s !important;}
.d1s {transition-delay: 1s !important;}
.d125s {transition-delay: 1.25s !important;}
.d15s {transition-delay: 1.5s !important;}
.d175s {transition-delay: 1.75s !important;}
.d2s {transition-delay: 2s !important;}
.scale_in {transform: scale(0.5);transition: all 0.5s;opacity: 0}
.scale_in.active {transform: scale(1);opacity: 1;}