@charset "UTF-8";

/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Otake
	
	Update Description :
  [2025/06/03] Gナビ調整
	[2025/01/06] Slick Option定義追加
	[2024/10/24] ヘッダードロップダウン削除調整
	[2024/09/09] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Global Redefinition
	2. Font Redefinition
	3. Box Setting
	4. Common Items Setting
		- Switch
		- Basic Link
	 	- Header Items
	 	- Footer Items
		- Breadcrumbs
		- Title Items
		- Fixed Banner
		- Text
	5. Slick Personal Setting

====================================== */


/*===== ■1. Global Redefinition =====*/
:root {
  --baseC: #fff;
  --mainC: #000;
  --accentC: #cabc73;
  --LGC: #f3f3f3;
  --GC: #ddd;
  --RC: #c00;
}

body {
	color: var(--mainC);
	line-height: 1.5;
  margin: 0px auto;
	font-feature-settings: "palt";
	letter-spacing:1px;
}

img { 
  width: 100%;
  max-width: 114.5rem;
  height: auto;
  vertical-align: bottom;
}

sup {
	vertical-align: text-top;
	&.ini { vertical-align: inherit;}
}


/*===== ■2. Font Redefinition =====*/
html { font-size: 62.5%;}

body {
	font-size: 1.5em;
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, sans-serif;
  font-optical-sizing: auto;
	font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

@media (max-width: 768px){ html { font-size: calc(100vw / 76.8 * 2.048);} body { font-size: 1.6em;}}
@media (max-width: 640px){ html { font-size: calc(100vw / 64 * 1.7067);}}
@media (max-width: 480px){ html { font-size: calc(100vw / 48 * 1.28);}}
@media (max-width: 375px){ html { font-size: calc(100vw / 37.5 *1);}}
@media (max-width: 360px){ html { font-size: calc(100vw / 36);}}
@media (max-width: 320px){ html { font-size: calc(100vw / 32);}}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?y0ctwa');
  src:  url('fonts/icomoon.eot?y0ctwa#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?y0ctwa') format('truetype'),
    url('fonts/icomoon.woff?y0ctwa') format('woff'),
    url('fonts/icomoon.svg?y0ctwa#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="ico_"], [class*="ico_"] {
  font-family: 'icomoon' !important;
  speak: never;
  padding: 0 1rem;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico_arrow-v:before { content: "\e900";}
.ico_arrow-h:before { content: "\e901";}
.ico_mail:before { content: "\e902";}
.ico_boxes:before { content: "\e903";}
.ico_word:before { content: "\e904";}
.ico_pdf:before { content: "\e905";}


/*===== ■3. Box Setting =====*/
main {
  display: block;
  margin-bottom: 10rem;
}

article {
}

section {
  max-width: 108.5rem;
  margin: 9rem auto 10rem;
  padding: 0 2rem;
}

.box_wrapper {
  max-width: 108.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}
footer .box_wrapper {max-width: 118.5rem;}

.box_fill {
  margin-bottom: 10rem;
  padding: 9rem 0 10rem;
  background: var(--LGC);
  section {
    margin: 0 auto 8rem;
    &:last-child { margin-bottom: 0;}
  }
}

@media (max-width: 768px){
  main {
    display: block;
    margin-bottom: 8rem;
  }

  section {
    margin: 4rem auto;
    padding: 0 1rem;
  }

  .box_wrapper {
    padding: 0 1rem;
  }

  .box_fill {
    margin-bottom: 4rem;
    padding: 4rem 0;
    section {
      margin: 0 auto 2rem;
    }
  }
}


/*===== ■4. Common Items Setting =====*/
/* Switch */
.pc { display: block;}
.sp { display: none;}
@media (max-width: 768px){
  .pc { display: none;}
  .sp { display: block;}
}


/* Basic Link */
a {
  color: currentColor;
	outline: hidden;
	text-decoration: none;
  transition: all .25s;
  @media (hover: hover){
    &:hover {
      opacity: .65;
      transition: all .25s;
      i {
        transition: all .25s;
      }
    }
  }
  &.soon {
    pointer-events: none;
    opacity: .65;
    color: #909090 !important;
  }  
}
.text {
	text-decoration: underline;
	color: var(--RC);
}
.button {
  display: block;
  overflow: hidden;
  position: relative;
  max-width: 25rem;
  padding: 1.5rem 3rem;
  border-radius: .3rem;
  background: var(--mainC);
  color: #fff;
  text-align: center;
  opacity: 1 !important;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: var(--accentC);
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .25s;
		content: "";
	}
	&.center { margin: 0 auto;}
	> span {
		display: block;
		position: relative;
		z-index: 2;
	}
	i {
		position: absolute;
		top: 50%;
		right: 0;
		margin: auto 0;
		transform: translateY(-50%);
	}
  @media (hover: hover){
    :not(b)&:hover {
      color: var(--mainC);
			&::before {
				z-index: 0;
				transform: scale(1, 1);
				transform-origin: left top;
				transition: transform .25s;
			}
    }
  }
	&.prev {
		i {
			right: auto;
			top: 36%;
			left: 0;
			transform: scaleX(-1);
		}
	}
}

@media (max-width: 768px){
  .button {
    max-width: none;
    margin: 0 2rem;
		&.center { margin: 0 2rem;}
  }
}


/* Header Items */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  & > :first-child { padding: .5rem 0 .5rem 2rem;}
  nav > ul {
    display: flex;
    > li {
      margin-left: 2rem;
    }
    > li:first-child {
      margin-left: 1rem;
    }
    > li > a {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 100%;
      line-height: 1.2;
      &:hover {
        opacity: .7;
      }
    }
    > li:not(:nth-last-child(-n+3)) a::after {
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 31.25%;
      background: inherit;
      transition: all .25s;
      content: "";
    }
    > li:not(:has(ul)) a.active::after { background: var(--accentC);}
    @media (hover: hover){
      > li:not(:has(ul)):not(:last-child) a:hover::after {
        background: var(--accentC);
      }
    }
    > li:nth-last-child(-n+1) > a {
			min-width: 9rem;
      padding: 3rem 1rem;
			border-left: 1px solid #fff;
      background: var(--mainC);
      color: var(--baseC);
			text-align: center;
      @media (hover: hover){
        &:hover { background: #262626;}
      }
    }
    > li:last-child > a {
      padding: 3rem 2rem 3rem 1rem;
      background: var(--accentC);
      color: var(--mainC);
      @media (hover: hover){
        &:hover { background: #c6b662;}
      }
    }
    ul {
      position: absolute;
      z-index: 2;
      visibility: hidden;
      opacity: 0;
      li {
        margin-top: 1px;
        a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1.5rem .5rem 1.5rem 1.5rem;
          background: var(--mainC);
          color: var(--baseC);
          opacity: 1 !important;
          @media (hover: hover){
            &:hover { background: #262626;}
          }
          i { color: var(--accentC);}

        }
      }
    }
  }
}

@media (max-width: 768px){
  header {
    display: block;
    & > :first-child {
      width: 65%;
      margin: 0 auto;
      padding: .5rem 0;
    }
    button {
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      gap: .75rem;
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 99;
      width: 4.5rem;
      height: 4.5rem;
      padding: .5rem 1rem;
      background: var(--baseC);
      transition: all .25s;
      span {
        width: 100%;
        height: .25rem;
        background: var(--mainC);
      }
    }
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100lvh;
      padding: 6rem 2rem;
      background-color: rgba(255, 255, 255, .95);
      overflow: scroll;
      opacity: 0;
      visibility: hidden;
      transform: translateX(100%);
      transition: all .25s;
      z-index: 99;
      &::-webkit-scrollbar { display: none}
    }
    nav > ul {
      display: block;
      > li {
        margin-left: 0;
      }
      
      > li:not(:last-child) {
        border-bottom: 1px solid var(--GC);
      }
			> li:nth-last-child(3) { margin: 4rem 0 0;}
      > li > a {
        padding: 2rem;
        font-size: 1.8rem;
      }
      > li:not(:nth-last-child(-n+3)) a::after { display: none;}
      ul {
        position: static;
        visibility: visible;
        opacity: 1;
        li {
          margin-top: 0;
          &:not(:last-child){ border-bottom: 1px solid var(--GC);}
          a {
            justify-content: center;
            background: none;
            padding: 2rem;
            font-size: 1.8rem;
            color: var(--mainC);
            i { display: none;}
          }
        }
      }
    }
  }
  
  /* nav open */
  [id^="navopen"] body {
    overflow: hidden; 
    height: 100svh;
    &::after {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
      width: 100%;
      height: 100svh;
      content: "";
    }
    header button {
      gap: 1rem;
      padding: .5rem;
      transform: rotate(90deg);
      span {
        width: 85%;
        height: .3rem;
        margin-right: auto;
      }
      span:first-of-type,
      span:last-of-type {
        margin: 0 0 0 auto;
        width: 50%;
        height: .25rem;
      }
      span:first-of-type { transform: rotate(45deg) translateX(.1rem);transform-origin: left bottom;}
      span:last-of-type { transform: rotate(-45deg) translateX(.1rem);transform-origin: left top;}
    }
    header nav {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }
}


/* Footer Items */
footer {
  position: relative;
  padding-bottom: 8rem;
  background: var(--mainC);
  font-weight: 300;
  font-size: 1.4rem;
  & > a {
    display: block;
    width: 12rem;
    margin: 0 auto 1.5rem;
    padding: 2.5rem 0 .5rem;
    background: var(--mainC);
    color: var(--accentC);
    font-weight: 600;
    font-family: "Zen Old Mincho", system-ui;
    line-height: 1;
    text-align: center;
    opacity: 1 !important;
    transform: translateY(-100%);
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  }
  .box_wrapper div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4.5rem;
    padding-bottom: 4.5rem;
    border-bottom: 1px solid #444;
    > :first-child {
      flex: 1;
      dt {
        max-width: 33rem;
        margin-bottom: 1.5rem;
      }
      dd {
        color: #909090;
      }
      & + * { width: 42rem;}
    }
  }
  .box_wrapper ul {
    display: grid;
    grid-template-columns: 17rem 23rem 14rem;
    row-gap: 1.5rem;
    column-gap: 6rem;
    white-space: nowrap;
    a {
      color: var(--baseC);
    }
  }
}

@media (max-width: 768px){
  footer {
    padding-bottom: 4rem;
    font-size: 1.3rem;
    .box_wrapper {
      display: flex;
      flex-direction: column;
      margin-top: -2rem;
      div {
        order: 2;
        display: block;
        margin-bottom: 0;
        padding-bottom: 0;
        border: none;
        > :first-child {
          margin: 0 0 3rem;
          dt {
            width: 80%;
            max-width: none;
            margin: 0 auto 1.5rem;
          }
          dd {
            color: #909090;
          }
          & + * { width: 42rem;}
        }
      }
      ul {
        order: 1;
        grid-template-columns: auto 1fr;
        row-gap: 2rem;
        column-gap: 4rem;
        margin-bottom: 3rem;
        padding-bottom: 3rem;
        border-bottom: 1px solid #444;
        white-space: normal;
        a {
          color: var(--baseC);
        }
      }
    }
  }
}


/* Breadcrumbs */
#breadcrumb {
  overflow: scroll;
  max-width: 108.5rem;
  margin: 1rem auto 6rem;
  border-left: 2rem solid #fff;
  border-right: 2rem solid #fff;
	&:has(+ #anchor) { margin: 1rem auto;}
  &::-webkit-scrollbar { display: none;}
  ol {
    display: flex;
    white-space: nowrap;
    li {
      display: flex;
      align-items: center;
      margin-right: 1rem;
      &:not(:last-child)::after {
        width: .5rem;
        height: .5rem;
        margin-left: 1rem;
        border-top: 1px solid var(--mainC);
        border-right: 1px solid var(--mainC);
        transform: rotate(45deg);
        content:'';
      }
    }
  }
}

@media (max-width: 768px){
  #breadcrumb {
    margin: 1rem auto 3rem;
    border-width: 1rem;
    font-size: 1.4rem;
  }
}


/* Title Items */
#head {
  display: grid;
  grid-template-rows: auto;
  margin: 0 2rem;
  &::after {
    width: 100%;
    height: 24rem;
    background-position: center;
    background-size: cover;
    content: "";
  }
  h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 24rem;
    padding: 1rem;
    font-weight: 600;
    font-size: 4rem;
    font-family: "Zen Old Mincho", system-ui;
    line-height: 1.2;
    &::after {
      color: var(--accentC);
      font-size: 1.5rem;
      content: "";
    }
  }
}

.subhead {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
  span {
    order: 2;
    font-weight: 600;
    font-size: 3.2rem;
  }
  b {
    order: 1;
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 2.5rem;
    color: var(--accentC);
    font-weight: 900;
    font-family: "Zen Old Mincho", system-ui;
    line-height: 1;
    &::before {
      position: absolute;
      top: .25rem;
      bottom: 0;
      margin: auto 0;
      left: 0;
      height: 70%;
      aspect-ratio: 1/1;
      border-radius: 100%;
      background: var(--accentC);
      content: "";
    }
  }
}

@media (max-width: 768px){
  #head {
    margin: 0 1rem;
    &::after {
      height: 20rem;
    }
    h1 {
      min-height: 20rem;
      font-size: 3.2rem;
			text-align: center;
    }
  }
  
  .subhead {
    margin-bottom: 2rem;
    span {
      font-size: 2.6rem;
      line-height: 1.2;
    }
    b {
      margin-bottom: 1rem;
      padding-left: 2rem;
    }
  }
}


/* Fixed Banner */
#banner {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 90;
  width: 26rem;
  a {
    display:block;
  }
  &> :not(:last-child) { margin-bottom: 1rem;}
}

@media (max-width: 768px){
  #banner { display: none;}
}



/* Text */
.notice {
	margin-top: 1rem;
	padding-left: 1em;
	font-size: 1.4rem;
	text-indent: -1em;
}

/*===== ■5. Slick Personal Setting =====*/
.slider {
	display: none;
	&.slick-initialized {
		display: block;
	}
	.slick-slide {
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
	}
	.slick-dots {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 1.5rem 2rem 0;
		li {
			margin: 0 .75rem;
			width: 1.5rem;
			height: 1.5rem;
			border-radius: 100%;
			background: var(--mainC);
			text-indent: -9999px;
			cursor: pointer;
			&.slick-active {
				background: var(--accentC);
			}
			@media (hover: hover){
				&:hover { background: var(--accentC);}
			}
		}
	}
}