@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

body{
      margin: 0;
       font-feature-settings: "palt";
   font-family: "Noto Sans JP", sans-serif;
   font-size:20px;
   line-height:35px;
   letter-spacing: 1px;
}

@media only screen and (max-width: 768px) {
body{
     font-size:15px;
}
}

p{
  margin:0;
}

img{
  max-width:100%;
}

.u-tab{
display: none;
}

.u-sp{
display: none;
}
@media only screen and (max-width: 1100px) {
  .u-pc{
  display: none;
}

  .u-tab{
  display: block;
}

.u-sp{
display: none;
}
}

@media only screen and (max-width: 768px) {
  .u-pc{
  display: none;
}

  .u-tab{
  display: none;
}

.u-sp{
display: block;
}
}


a{
    text-decoration: none;
}

main {
  display: block;
}


/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}





/*    ヘッダー    */
.l-header{
width:100%;
height:100px;
background-color: rgba(255, 255, 255, 0.9);
position:fixed;
top:0;
z-index: 999;
}

@media only screen and (max-width: 768px) {
.l-header{
height:60px;
}
}

.l-header__inner{
    max-width:80%;
    height:100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
}

@media only screen and (max-width: 768px) {
.l-header__inner{
    justify-content: center;
    height:60px;
}
}

.l-header-logo{
    width:210px;
}
@media only screen and (max-width: 1600px) {
.l-header-menu{
  font-size:14px;
}
}

@media only screen and (max-width: 768px) {
.l-header-logo{
    width:50%;
   padding-top: 10px;
}
}


.l-header-menu ul{
    display: flex;
    justify-content: center;
    align-items: center;
}

.l-header-menu li{
    margin-right: 25px;
    margin-left: 25px;
}

.l-header-menu li a{
    color:#000000;
}

.l-header-menu li a:visited{
    color:#000000;
}



/*    ヘッダー    */


/*    フッター    */

.l-footer{
    width:100%;
  background-image: url(../images/common/back-footer.svg);
  margin-top: -2px;
    padding-top:60px;
    padding-bottom:30px;
}

.l-footer__inner{
    max-width:90%;
    margin-right: auto;
    margin-left: auto;
    background-color: #9380b5;
    border-radius: 20px;
    padding:60px 30px 30px;
}

@media only screen and (max-width: 768px) {

.l-footer__inner{
    max-width:80%;
        padding: 5% 6% 4%;
}
}

.l-footer-logo{
        width:460px;
      margin-right: auto;
    margin-left: auto;
}
@media only screen and (max-width: 768px) {
.l-footer-logo{
        width:60%;
}
}

.l-footer-menu{
    margin-top: 40px;
    margin-bottom: 30px;
}

.l-footer-menu {
    margin-top: 20px;
    margin-bottom: 10px;
}

.l-footer-menu ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


@media only screen and (max-width: 768px) {
.l-footer-menu ul{
    font-size: 15px;
}
}

.l-footer-menu li{
    margin-right: 25px;
    margin-left: 25px;
}

@media only screen and (max-width: 768px) {
.l-footer-menu li{
    margin-right: 10px;
    margin-left: 10px;
}
}

.l-footer-menu li a{
    color:#ffffff;
}

.l-footer-menu li a:visited{
    color:#ffffff;
}

.c-fotter-copy{
   font-size:14px;
    color:#ffffff;
    text-align: right;
}

@media only screen and (max-width: 768px) {
.c-fotter-copy{
   font-size:12px;
}

}

/*    フッター    */


/*    メイン    */

.l-main__inner{
    max-width:80%;
    margin-right: auto;
    margin-left: auto;
}

@media only screen and (max-width: 768px) {
.l-main__inner{
      max-width:90%;
}
}

/*    メイン    */


/*      ハンバーガーメニュー       */
.c-header {
  align-items: center;
  background-color: #eeeeee; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  min-width: 80px; /* カスタマイズしてください */
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0px; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 768px) {
  .c-hamburger-menu__list {
    background-color: rgba(255,255,255,1); /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(100%);
    transition: 0.5s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 768px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
        position: absolute;
        top: 10px;
        right: 20px;
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 4px;
    border-radius: 4px;
    transition: 0.3s;
    width: 28px;
}

@media screen and (max-width: 768px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}

/*     ドロップダウンメニュー         */

/* メニューアイテムのホバースタイル */
.c-header__list-item:hover .c-header__pull-list {
  visibility: visible; /* 下層メニューを表示 */
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
@media screen and (max-width: 768px) {
.drop-menu {
    text-align: center;
    pointer-events: none;
}
}

.c-header__pull-list {
  flex-direction: column;
  background-color: rgba(255,255,255,0.8); /* ドロップダウンメニューの背景色 */
left: -100%;
  position: absolute;
top: 100%;
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
.c-header__pull-list {
  position: relative;
    padding-top: 0;
      visibility: visible;
      left:0;
}
}

.c-header__pull-list-item{
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #9380b5;
    width:100%;
    text-align: center;
}
.c-header__pull-list-item:last-of-type{
    border-bottom: none;
}

/*      パンくずリスト        */
.l-bread-list{
    max-width:80%;
    margin-top:120px;
    margin-right: auto;
            margin-bottom:60px;
    margin-left: auto;

}
@media only screen and (max-width: 768px) {
  .l-bread-list{
    margin-top: 80px;
    margin-bottom: 30px;
  }
}

.l-bread-list ul{
  display: flex;
  align-items: center;
}

.l-bread-list ul li{
  margin-right:30px;
}

@media only screen and (max-width: 768px) {
.l-bread-list{
      max-width:90%;
}
}

/*      パンくずリスト        */