@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 =====*/

/*===== ■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;
      }
    }
  }
 
}
.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 */
.header-container{
/*  background: #000 url(../img/top/mv.webp) no-repeat 0 0 / cover;*/
}
  
/* Breadcrumbs */
#breadcrumb {
  overflow: scroll;
  max-width: 108.5rem;
  font-size: 1.4rem;
  margin: 1rem auto 6rem;
	&: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 0rem 3rem 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: 42rem;
    padding: 12rem 1rem 1rem;
    font-weight: 600;
    font-size: 4rem;
    font-family: "Zen Old Mincho", system-ui;
    line-height: 1.2;
    text-align: center;
    &::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: 22rem;
      font-size: 2.4rem;
			text-align: center;
      padding: 4rem 1rem 1rem;
    }
  }
  
  .subhead {
    margin-bottom: 2rem;
    span {
      font-size: 2.6rem;
      line-height: 1.2;
    }
    b {
      margin-bottom: 1rem;
      padding-left: 2rem;
    }
  }
}





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