/*
Theme Name: tnk80
*/
@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0
}

ul,
ol {
  list-style: none;
  padding-left:0;
}

body {
  min-height: 100vh;
  line-height: 1.5
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1
}

h1,
h2,
h3,
h4 {
  text-wrap: balance
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor
}

img,
picture {
  max-width: 100%;
  display: block
}

input,
button,
textarea,
select {
  font: inherit
}

textarea:not([rows]) {
  min-height: 10em
}

:target {
  scroll-margin-block: 5ex
}

body {
  position: relative;
  color: #333;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.mincho{
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}


/* ベース */
body {
  position: relative;
}
:root {
  --green: #00A542;
  --light-green: #97D500;
}
.wrapper {
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1280px;
}
a {
  text-decoration: none;
  color: var(--deep-blue);
  transition: all .3s ease;
}

a:hover {
  opacity:.8;
}
.tel a{
  color:#333;
  text-decoration:none;
}
/*
ヘッダー
*/
.site__header {
  width: 100%;
  padding: 16px 0;
  margin-inline: auto;
  max-width:96vw;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap:0 24px;
  color: var(--green);
}
.site__logo img{
  margin-inline:auto;
}
.site__header__tel li{
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.site__header__tel span{
  display:inline-block;
  min-width:140px;
  text-align: center;
  font-size:.7rem;
  color:#fff;
  background-color: var(--green);
  padding:4px 8px;
  border-radius: 16px;
  margin-right: 8px;
}
.site__header__tel a{
  font-size: 1.2rem;
  line-height: 1;
  font-weight: bold;
}
@media (min-width: 750px) {
  a[href^="tel:"] {
      pointer-events: none;
  }
}
.site__header__info{
  text-align: right;
  font-size:.8rem;
}
.font__size{
  font-size:.8rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.font__size__change{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.font__size p{
  margin-right:4px;
}
.font__size__change button{
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}
.font__size__change{
  border:1px solid var(--green);
  border-radius: 4px;
}
.font__size__change button{
  padding: 2px 6px;
}
.font__size__change button.active{
  color:#fff;
  background:var(--green);
}


@media all and (min-width:960px){
  .site__header > *{
    flex:1;
  }
  .site__header__tel{
    order:-1;
  }
}
@media all and (max-width:959px){
  .site__header{
    flex-wrap: wrap;
  }
  .site__header{
    justify-content: center;
  }
  .site__logo{
    width:100vw;
  }
}

.site__hero{
  text-align: center;
}
.site__hero p{
  font-size: .9rem;
  color:#fff;
  background-image: linear-gradient(90deg, var(--green), var(--light-green));
}
.site__hero p span{
  display: block;
  padding-block:6px 4px;
  padding-inline: 2vw;
}
.site__hero p:after{
  display:block;
  content: '';
  width:100VW;
  height:4px;
  background-image: linear-gradient(90deg,var(--light-green), var(--green));
}
.hero__img{
  background: url(../images/80th/hero.webp) center center no-repeat;
  background-size: cover;
  aspect-ratio: 1 / .47;
}

.section__wrapper{
  margin-top:80px;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.section__wrapper section{
  margin-bottom:120px;
}
.timeline__header{
  text-align: center;
  margin-bottom:80px;
}
.timeline__header h1{
  font-size: clamp(2.6rem, 4.68vw, 5rem);
  font-weight:normal;
  margin-bottom: 16px;
  color:var(--green);
}

.sec__header{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:2rem;
  text-align: center;
  margin-bottom: 60px;
  margin-inline: calc(50% - 50vw);
}

.sec__header:before,
.sec__header:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--green);
}

.sec__header h2{
  font-size: clamp(1.8rem, 3vw, 4rem);
  font-weight:normal;
  margin-bottom: 8px;
  color:var(--green);
}

.timeline__list{
  margin-bottom:60px;
}
.timeline__list h3{
  text-align: center;
  font-size: clamp(1.8rem, 2.6vw, 3.6rem);
	font-weight:500;
  margin-bottom: 32px;
  color:var(--green);
}
.timeline__list h3 span{
  font-size:66%;
}

.timeline__contents{
  margin-bottom: 60px;
}
.timeline__contents dt{
  font-size: clamp(1.2rem, 1.875vw, 1.4rem);
	font-weight:bold;
  color:var(--green);
  margin-bottom:16px;
}
.timeline__contents dt span{
  display: block;
  font-size:80%;
}
.timeline__contents dt:after{
  content: '';
  display: block;
  width:40%;
  height:1px;
  background-color: var(--green);
}
.timeline__contents dt.no-border:after{
  content: none;
}
.timeline__contents dd{
  line-height: 2;
}

.message{
  background-color: #F2FAF6;
  padding-block: 64px;
}
.message__header{
  text-align: center;
  margin-bottom:80px;
}
.message__header h1{
  font-size: clamp(2.6rem, 4.68vw, 5rem);
  font-weight:normal;
  margin-bottom: 16px;
  color:var(--green);
}
.message__content{
  text-align: center;
}
.message__content p{
  line-height: 2;
  margin-bottom:40px;
}
@media all and (max-width:767px){
  .message__content {
    text-align: left;
    padding-inline:3vw;
  }
  .message__content .sp-none{
    display: none;
  }
}

.site__footer{
  padding-top:32px;
}
.site__footer__inner{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom:32px;
}
.site__footer__info {
  font-size:.85rem;
}
.site__footer__info li{
  margin-bottom:8px;
}
.site__footer__info li:first-child {
  font-weight:bold;
}
.copyright{
  text-align: center;
  font-size:.8rem;
  margin-inline: calc(50% - 50vw);
  padding:8px 16px;
  color:#fff;
  background: linear-gradient(90deg, var(--green), var(--light-green), var(--green));
}