@charset "UTF-8";
/*
Theme Name: protimes
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/* reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.8;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 400;}:where(h1,h2,h3){line-height:calc(1em + 1rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* -------------------------
   COMMON
------------------------- */
:where(html){ color-scheme: #fff;}
:root {
  --color-main: #004688;
  --color-sub: #23B7F3;
  --color-accent: #FF9133;
  
  --color-text: #333;
  --color-white: #ffffff;
  --color-black: #000;
  --color-right: #F2F1EF;
  
  /* opacity系 */
  --white-80: rgba(255,255,255,0.8);
  --white-60: rgba(255,255,255,0.6);
  --white-50: rgba(255,255,255,0.5);
  --white-40: rgba(255,255,255,0.4);
  --white-20: rgba(255,255,255,0.2);}

html{
  scroll-behavior: smooth;
  font-size: 100%;
  background: var(--color-right);
  overflow-x: hidden;}
body{
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: var(--color-text);
  font-size: 100%;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;}
a {
  position: relative;
  color: var(--color-text);
  display: block;
  text-decoration: none;}
@media screen and (min-width: 768px){
a:hover{ 
	opacity:0.8;
  top:1px;
  transition:0.2s all;}}

/* font */
.sans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;}
.serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;}

/* weight */
.txw-1 { font-weight: 100;}
.txw-2 { font-weight: 200;}
.txw-3 { font-weight: 300;}
.txw-4 { font-weight: 400;}
.txw-5 { font-weight: 500;}
.txw-6 { font-weight: 600;}
.txw-7 { font-weight: 700;}
.txw-8 { font-weight: 800;}
.txw-9 { font-weight: 900;}

p { font-weight: 400;}

/* color */
.tcl-1 { color: var(--color-main); }
.tcl-2 { color: var(--color-accent); }
.tcl-3 { color: var(--color-sub); }
.tcl-4 { color: #FFFFFF; }

/* line-height */
.lh-10 { line-height: 1; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-20 { line-height: 2; }

/* text-decoration */
.underline { text-decoration: underline; }

/* align */
.txa-c { text-align: center;}
.txa-l { text-align: left;}
.txa-r { text-align: right;}
.txa-c-pc { text-align: center;}
.txa-r-pc { text-align: right;}

/* text */
.txs-12 { font-size: 0.75rem; }
.txs-14 { font-size: 0.875rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-20 { font-size: 1.25rem; }
.txs-21 { font-size: 1.3125rem; }
.txs-24 { font-size: 1.5rem; }
.txs-28 { font-size: 1.75rem; }
.txs-32 { font-size: 2rem; }
.txs-36 { font-size: 2.25rem; }
.txs-42 { font-size: 2.5rem; }
.txs-48 { font-size: 3rem; }
.txs-49 { font-size: 3.0625rem; }
.txs-61 { font-size: 3.8125rem; }
.txs-72 { font-size: 4.5rem; }
.txs-80 { font-size: 5rem; }
.txs-190 { font-size: 11.875rem; }

@media screen and (max-width: 1080px){
  .txs-12 { font-size: 0.75rem; }
  .txs-14 { font-size: 0.875rem; }
  .txs-16 { font-size: 1rem; }
  .txs-18 { font-size: 1.0625rem; }
  .txs-20 { font-size: 1.25rem; }
  .txs-21 { font-size: 1.25rem; }
  .txs-24 { font-size: 1.5rem; }
  .txs-28 { font-size: 1.75rem; }
  .txs-32, .txs-36 { font-size: 2rem; }
  .txs-42 { font-size: 2.25rem; }
  .txs-48 { font-size: 2.5rem; }
  .txs-49 { font-size: 2.5rem; }
  .txs-61 { font-size: 3rem; }
  .txs-72 { font-size: 3.5rem; }
  .txs-80 { font-size: 4rem; }
  .txs-190 { font-size: 6rem; }}

@media screen and (max-width: 768px){
  .txs-12 { font-size: 0.75rem; }
  .txs-14 { font-size: 0.875rem; }
  .txs-16 { font-size: 1rem; }
  .txs-18 { font-size: 1rem; }
  .txs-20 { font-size: 1.125rem; }
  .txs-21 { font-size: 1.125rem; }
  .txs-24 { font-size: 1.25rem; }
  .txs-28 { font-size: 1.3rem; }
  .txs-32, .txs-36 { font-size: 1.5rem; }
  .txs-42 { font-size: 1.6rem; }
  .txs-48 { font-size: 1.75rem; }
  .txs-49 { font-size: 1.75rem; }
  .txs-61 { font-size: 2rem; }
  .txs-72 { font-size: 2.5rem; }
  .txs-80 { font-size: 3rem; }
  .txs-190 { font-size: 4rem; }
  .txa-c-pc { text-align: left;}
  .txa-r-pc { text-align: left;}}

@media screen and (max-width: 480px){
  .txs-12 { font-size: 0.7rem; }
  .txs-14 { font-size: 0.8rem; }
  .txs-16 { font-size: 1rem; }
  .txs-18 { font-size: 1.05rem; }
  .txs-20 { font-size: 1.1rem; }
  .txs-21 { font-size: 1.15rem; }
  .txs-24 { font-size: 1.25rem; }
  .txs-28 { font-size: 1.35rem; }
  .txs-32 { font-size: 1.5rem; }
  .txs-36 { font-size: 1.6rem; }
  .txs-48 { font-size: 1.85rem; }
  .txs-49 { font-size: 1.85rem; }
  .txs-61 { font-size: 2.15rem; }
  .txs-72 { font-size: 2.6rem; }
  .txs-80 { font-size: 2.9rem; }
  .txs-190 { font-size: 3.5rem; }}

.ef-fade {
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
	transform: translate(0, 50px);}
.is-scrollIn {
  opacity: 1;
	transform: translate(0, 0);}

/* -------------------------
   ALL PARTS
------------------------- */
.wrap {
  margin: 0 auto;
  padding: 0 4vw;
  width: 100%;}
.contents {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;}
a.more {
  width: 100%;
  max-width: 280px;
  text-align: center;
  font-weight: 600;
  height: 64px;
  display: flex;
  justify-content: center;
  gap: 0 12px;
  align-items: center;
  color:var(--color-white);
  background: var(--color-accent);
  box-shadow: 0 3px 5px #ccc;}
a.more .linkname {
  position: relative;
  top: -1px;}
a.more .arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);}

@media screen and (max-width: 1280px){
  body { width: 100%; overflow-x: hidden;}
  .contents { padding: 0 4vw;}}
@media screen and (max-width: 768px){
  body { width: 100%; overflow-x: hidden;}
	.wrap { padding: 0 10px;}
  .contents { padding: 0 10px;}
  a.more { max-width: 216px; margin: 0 auto;font-size: 14px;}}

/* 表示 */
.d-pc, .d-pd, .d-sp, .d-pc-pd, .d-pd-sp { display: none; }
.flex-pc, .flex-pd, .flex-sp { display: block;}
@media screen and (min-width: 769px) {
  .d-pc, .d-pc-pd { display: block;}
  .flex-pc { display: flex;}}
@media screen and (min-width: 481px) and (max-width: 768px) {
  .d-pd, .d-pc-pd, .d-pd-sp { display: block;}
  .flex-pd { display: flex;}}
@media screen and (max-width: 480px) {
  .d-sp, .d-pd-sp { display: block;}
  .flex-sp { display: flex;}}

/* -------------------------
   HEADER
------------------------- */
#header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  width: 100%;
  padding: 0 40px;
  background: var(--color-main);
  z-index: 99;}
#header h1 { color: #fff;}
#header h1 img {
	margin-right: 20px;
	vertical-align: middle;
	display: inline-block;}
#header .right {
  gap:37px;
  display: flex;}
/* ハンバーガー */
#hamburger {
  width: 50px;
  height: 50px;
  display: flex;
  padding: 8px 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: none;
  z-index: 99;
  background: var(--white-60);
  border-radius: 5px;
  cursor: pointer;}
#hamburger .bar {
  width: 28px;
  height: 4px;
  background: var(--color-main);
  border-radius: 2px;
  transition: all 0.3s ease;}
#hamburger.active .bar1 { transform: rotate(45deg) translate(8px,8px);}
#hamburger.active .bar2 { opacity: 0;}
#hamburger.active .bar3 { transform: rotate(-45deg) translate(7px,-7px);}
#main-nav {
  position: fixed;
  top: -110vh; right: 0;
  height: 100vh;
  width: 100vw;
  background: #003261;
  transition: all 0.5s;
  padding: 160px 40px;
  overflow-y: scroll;
  z-index: 90;}
#main-nav.active { right: 0;top:0;}
#main-nav ul.link {
  display: flex;
  list-style: none;
  gap:24px 32px ;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;}
#main-nav ul.link li {
  width: calc(50% - 16px);}
#main-nav ul.link li a {
  position: relative;
  height: 64px;
  line-height: 64px;
  display: flex;
  align-items: center;
  gap:8px;
  border-bottom: 1px solid #fff;
  font-weight: 500;
  color: #fff;
  font-size: 18px;
  text-decoration: none;}
#main-nav ul.link li a::after {
  content: "";
  position: absolute;
  right: 20px;
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);}
#main-nav .flex {
	display: flex;
	gap:130px;
	align-items: center;
	justify-content: space-between;}
#main-nav a.more {
	height: 45px;
	width: 240px;
	box-shadow: 0 2px 5px #00000033;}
#main-nav .second a.more {
	margin-top: 16px;
	background: var(--color-sub);}
#main-nav .bana ul {
	margin-top: 80px;
	display: flex;
	gap:16px;
	align-items: center;
	justify-content: center;}
/* 固定メニュー */
#fixed-menu {
  z-index: 80;
  position: fixed;
  top: 100px;
  right: 0;}
#fixed-menu a {
  line-height: 1;
  letter-spacing: 3px;
  margin-bottom: 16px;
  writing-mode: vertical-rl;
  background: var(--color-accent);
  padding: 20px;
  color: #fff;}
#fixed-menu li:nth-child(2) a {
  background: #23B8F3;
  color: #fff;}
#fixed-menu a img {
  margin-bottom: 6px;
  display: inline-block;}
@media screen and (max-width: 1180px) {
  #main-nav { padding: 160px 10px;}
  #main-nav .flex { justify-content: center;gap:30px;}}
@media screen and (max-width: 980px) {
  #main-nav .flex { flex-wrap: wrap;gap:36px;}}
@media screen and (max-width: 768px) {
	#header { padding: 0 10px; height: 64px;}
	#header h1 { font-size: 18px;line-height: 1;}
	#header h1 img { max-width: 40px; margin-right: 15px;}
	#header .tel { display: none;}
	#fixed-menu { display: none;}
	#hamburger { height: 40px; width: 40px; padding: 10px;}
	#hamburger .bar { width: 20px;height: 3px;}
	#hamburger.active .bar1 { transform: rotate(45deg) translate(6px,5px);}
	#hamburger.active .bar3 { transform: rotate(-45deg) translate(5px,-4px);}
  #main-nav { padding: 80px 12px;}
  #main-nav .flex { display: block;}
  #main-nav ul.link { gap: 0; margin-bottom: 32px;}
  #main-nav ul.link li { width: 100%;}
  #main-nav ul.link li:last-child a { border-bottom: none;}}

/* -------------------------
   FOOTER
------------------------- */
#footer {
  color: #fff;
  padding: 56px 0 48px;
  background:var(--color-main);}
#footer .linkbox {
  display: flex;
  justify-content: center;
  gap:48px;}
#footer .linkbox a {
  position: relative;
  display: flex;
  line-height:1;
  align-items:baseline;
  gap: 8px;
  color: #fff;}
#footer .linkbox a img {
  position: relative;
  top: 2px;}
#footer .more {
  box-shadow: 0 2px 5px #00000033;
  width: 240px;
  height: 45px;
  gap:8px;}
#footer .flex_1 {
  gap:48px;
  justify-content: space-between;
  display: flex;}
#footer .flex_2 {
  margin: 15px 0;
  gap:15px;
  justify-content: space-between;
  display: flex;}
#footer .flex_2 a { letter-spacing: 0;}
#footer .flex_2 img {
  position: relative;
  top: -2px;
  vertical-align:middle;
  display: inline-block;}
#footer h1 {
  gap:20px;
  display: flex;
  align-items: center;
  line-height: 1;}
#footer .info {
  padding:48px 0;
  width: 480px;}
#footer .info p.txs-18 {
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 1px solid #fff;}
#footer .info .flex_2 p.txs-24 { letter-spacing: normal;}
#footer .list {
	padding-bottom: 20px;
	flex-wrap: wrap;
  padding-top: 90px;
  display: flex;
  width: 616px;
  gap:16px;}
#footer .list .item { width: 300px;}
#footer a.txs-14 {
  margin-top: 8px;
  color: #fff;}
#footer a.txs-14 img {
  margin-left: 8px;
  position: relative;
  top: 3px;
  display: inline-block;}
#footer a.more.last { display: none;}

@media screen and (max-width: 1280px) {
  #footer .flex_2, #footer .flex_1 {
    justify-content: center;
    flex-wrap: wrap;}
  #footer .flex_1 { gap:0;}
  #footer .linkbox {flex-wrap: wrap;gap:20px 48px;}
  #footer .list { padding: 0 0 20px;} }

@media screen and (max-width: 768px) {
  #footer { padding: 32px 0;}
  #footer .contents { padding: 0 22px;}
  #footer .info { padding-top:32px; width: 100%;}
  #footer .linkbox { display: block;}
  #footer .linkbox a {
    position: relative;
    padding: 24px 0;
    border-bottom: 1px solid #fff;}
  #footer .linkbox .item:last-child a { border: none;}
  #footer .linkbox a::after {
    content: "";
    position: absolute;
    right: 20px;
    display: block;
    top: 29px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);}
  #footer .info { width: 100%;}
  #footer .flex_2 { justify-content: flex-start; margin: 5px 0;}
  #footer .flex_2 .txs-24 { font-size: 28px;}
  #footer .flex_2 a.more.up { display: none;}
  #footer .info p.txs-18 { font-size: 14px;}
  #footer a.more.last { font-size: 16px; display: flex;max-width: 240px; margin-top: 24px;}
  #footer .list .item { width: calc(50% - 10px);}
  #footer .list { padding:0 0 32px; justify-content: center;gap:10px;width: 100%;}
  #footer .txa-c { font-size: 14px;}}

/* -------------------------
   BANNER
------------------------- */
#banner { padding: 80px 0;}
#banner .list {
  display: flex;
  gap: 24px;
  justify-content: space-between;}
#banner .list .item {
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 5px #C5CED6;
  border: 2px var(--color-main) solid;
  width: calc(50% - 12px);}
#banner .list .item .flex {
  display: flex;
  gap:48px;}
#banner .list .item h1 { color:  var(--color-main);}
#banner .list .item h1 span {
  padding-bottom: 10px;
  display: block;}
#banner .list .item .view {
  display: flex;
  align-content: center;
  line-height: 24px;
  gap: 8px;
  margin-top: 20px;}
#banner .list .item .view .arrow {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: block;
	background: var(--color-accent);}
#banner .list .item .view .arrow::after {
	position: absolute;
	content: "";
  display: block;
	top: 9px;
	left: 7px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);}

@media screen and (max-width: 768px) {
  #banner { padding: 56px 0;}
  #banner .list { flex-wrap: wrap;}
  #banner .list .item { width: 100%;}
  #banner .list .item .flex { display: block;}
  #banner .list .item .photo { width: 100%;}
  #banner .list .item img { width: 100%;}
  #banner .list .item h1 { text-align: center;}
  #banner .list .item h1 span{ font-size: 28px; line-height: 1; padding: 24px 0 0;}
  #banner .list .item .view { justify-content: center; font-size: 14px; margin-top: 8px;}}