@charset "utf-8";
/* =============================== 
common
================================ */
:root {
    /* common color */
    --primary-black: #333333;
    --primary-green: olivedrab;
    --primary-greenR: 107, 142, 35;
    --primary-darkGreen: #324211;
    --primary-linkBlue: #1558d6;
     
    /* Font waight */
    --fontNormal: 400;
    --fontSemiBold: 600;
    --fontBold: 700;
    --fontExtraBold: 800;

    /* common width */
    /* レスポンシブ時に可変する */
    --contentWidth: 130rem;                       /*pc  1300/1800px 72%*/
}

html {
  font-size: 62.5%;                               /* 10px = 1rem */
}

body {
  font-family:
          Inter;
  font-style: normal;
  font-weight: var(--fontNormal);
  color: var(--primary-brack, #333);
  line-height: 1.5;
  background-color: #fff;
}

img {
  /* 画像が親要素を超えたときに、親要素の幅に合わせて縮小する */
  max-width: 100%;
  height: auto;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1370px) {           /* pc版のコンテンツサイズを下回る時 */
  :root {
      --contentWidth: 85.2rem;
  }
}

/* sp */
@media screen and (max-width: 922px) {            /* pc版のコンテンツサイズを下回る時 */
  :root {
      --contentWidth: 66.4rem;
  }
}

/* sp コンテンツ幅を下回る時*/
@media screen and (max-width: 764px) { 
  :root {
    --contentWidth: 86.9%;
  }
}

/* =============================== 
header
================================ */

.header{
  background-color: var(--primary-green);
  background-image: url(../images/header/jigsaw_header.svg);
  background-repeat: repeat-x;
  background-size: contain;
  margin: 0 calc(50% - 50vw);
}

.header_box{
  width: var(--contentWidth);
  height: auto;
  aspect-ratio: 1300/260;                         /* pc */
  margin: 0 auto;
  position: relative;
}

.title_box{
  position: absolute;
  bottom: 5rem;
  left: 0;
  text-align: left;
  z-index: 1;
}

.title_sub {
  font-size: 2.8rem;
  margin:0 0 1rem;
}

.title_main {
  font-size: 6.4rem;
  font-weight: var(--fontExtraBold);
  line-height: 1;
}

.header_decoration {
  width: 36.5rem;
  height: 38.5rem;
  background-image: url(../images/header/jigsaw_deco.svg);
  background-repeat: no-repeat;
  border-radius: 10% 30% 80% 70%;

  position: absolute;
  top: 0rem;
  right: 10rem;
}

.menu{
  background-color: var(--primary-green);
}

.menu_box{
  width: var(--contentWidth);
  height: auto;
  aspect-ratio: 1300/120;                         /* pc */
  margin: 0 auto;

  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;                            /* 上下中央 */
}

.menu_item_box {
  display: flex;
}

.menu_item {
  margin-right: 4rem;
  font-size: 3.2rem;
  transition : color 0.5s ease 0s;
}

.menu_item:last-child {
  margin-right: 0;
}

.menu_item:hover{
  color: white;
}

.menu_item:active {
  transition-duration: .1s;
}

.sns_box {
  display: flex;
  justify-content: space-between;
}

.sns_item  {
  width: 4rem;                                    /* pc */
  height: 4rem;                                   /* pc */
  background-color: var(--primary-black);
  padding: 1rem;
  border-radius: 50%;
  margin-right: 2rem;
  transition: transform .3s;
}

.sns_item:hover {
  transform: translateY(0.3rem);
}

.sns_item:active {
  transition-duration: .1s;
}

.sns_item:last-child{
  margin-right: 0;
}

.sns_item.info {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.sns_item.github {
  padding: 1.2rem 0.6rem 0 0.5rem;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1370px) { 
  .header_box{
    aspect-ratio: 852/260;                        /* コンテンツ幅/高さ */
  }

  .title_sub {
    font-size: 2.2rem;
  }
  
  .title_main {
    font-size: 4.8rem;
  }

  .header_decoration {
    right: 7rem;
  }

  .menu_box{
    aspect-ratio: 852/120;                        /* コンテンツ幅/高さ */
  }

  .menu_item {
    margin-right: 2.4rem;
    font-size: 2.4rem;
  }
}

/* sp */
@media screen and (max-width: 922px) {   
  .header_box{
    aspect-ratio: 664/260;                        /* コンテンツ幅/高さ */
  }

  .header_decoration {
    top: 0rem;
    right: -5rem;
  }

  .menu_box{
    aspect-ratio: 664/120;                        /* コンテンツ幅/高さ */
  }

  .sns_item{
    display: none;                                /* snsアイコンを非表示 */
  }

  .sns_item.info{
    display: block;                               /* インフォメーションアイコンのみ表示する */
    margin-right: 0;
  }
}

/* sp コンテンツ幅を下回る時*/
@media screen and (max-width: 764px) {
  .title_box{
    bottom: 6.6vw;
  }

  .title_sub {
    font-size: clamp(1rem, 3.3vw, 2.2rem);
    margin:0 0 1.3vw;
  }

  .title_main {
    font-size: clamp(2rem, 7.2vw, 4.8rem);
  }

  .header_decoration {
    width: 55%;
    height: auto;
    aspect-ratio: 36.5/38.5;
    right: -2rem;
  }

  .menu_item {
    margin-right: 2.8vw;
    font-size: clamp(1rem, 3.6vw, 2.4rem);
  }

  .sns_item.info{
    width: clamp(2rem, 5.5vw, 4rem);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
  }
}

/* =============================== 
main
================================ */

.main {
  width: var(--contentWidth);
  margin: 0 auto 12rem;                           /* mainとfooterの間に120pxの空き */
  position: relative;
}

.contents_topic{
  height: auto;
  aspect-ratio: 1300/140;
  display: flex;
  justify-content: center;                        /*左右中央揃え*/
  align-items: center;                            /*上下中央揃え*/
}

.topic_h2 {
  font-size: 3.2rem;
}

.contents_box{
  display: flex;                                  /* 各アイテムを横並び */
  flex-wrap: wrap;                                /* 各アイテムを折り返して表示 */
  gap: 4rem;
}

.content_item{
  width: 40.6rem;                                 /* pc tablet */
  height: auto;
  aspect-ratio: 406/600;
  position: relative;
  transition: transform .3s;
}

.content_item:hover {
  transform: translateY(0.5rem);
}

.content_item:active {
  transition-duration: .1s;
}

.content_item.off{
  display: none;
}

.item_image {
  height: auto;
  aspect-ratio: 406/600;
  background: rgba(217,217,217,1);
  margin-bottom: 0.4rem;
}

.item_textBox {
  height: auto;
  aspect-ratio: 406/80;
}

.item_textTitle {
  width: 100%;
  height: 5rem;
  font-size: 2rem;
  text-align: left;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.item_textTopic {
  font-size: 1.6rem;
  text-align: left;
}

.new {
  width: 7rem;
  height: 7rem;
  background-color: var(--primary-green);
  border-radius: 50%;

  font-size: 2rem;
  color: white;
  justify-content: center;                        /*左右中央揃え*/
  align-items: center;                            /*上下中央揃え*/

  position: absolute;
  top: -2.4rem;
  left: -2.4rem;

  display: none;                                  /* 初期値で非表示 */
}

.new.on{
  display: flex;                                  /* アイコン表示と文字の上下左右中央揃え */
}

.top_button {
  width: 7rem;
  height: 7rem;
  background-color: var(--primary-green);
  border-radius: 50%;

  font-size: 2rem;
  color: white;
  display: flex;                                  /* 文字を上下左右中央揃え */
  justify-content: center;                        /* 左右中央揃え */
  align-items: center;                            /* 上下中央揃え */
  
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;

  transition : color 0.5s ease 0s;

  z-index: 2;
  visibility: hidden;
}

.top_button:hover{
  color: var(--primary-brack);
}

.top_button:active {
  transition-duration: .1s;                       /* マウスオーバー時にふんわり色が変わる */
}

/* スクロールダウンの時ふんわり現れる */
.top_button.fadein {
	visibility: visible;
    animation-duration: 0.4s;
    animation-name: fade-in;
}

@keyframes fade-in {
	0% {
	  visibility: hidden;
	  opacity: 0;
	}
  
	50% {
	  visibility: visible;
	  opacity: 0.5;
	}
  
	100% {
	  visibility: visible;
	  opacity: 1;
	}
}

/* スクロールアップの時ふんわり消える */
.top_button.fadeout {
	visibility: hidden;
    animation-duration: 0.4s;
    animation-name: fade-out;
}

@keyframes fade-out {
	0% {
		visibility: visible;
		opacity: 1;
	}
	50% {
		visibility: visible;
		opacity: 0.5;
	}
	100% {
		visibility: hidden;
		opacity: 0;
	}
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1370px) {
  .contents_topic{
    aspect-ratio: 852/140;                        /* 見出し高さ */
  }

  .contents_box{
   gap: 2.5rem;
  }
}

/* sp */
@media screen and (max-width: 922px) {   
  .contents_topic{
    aspect-ratio: 664/140;                        /* 見出し高さ */
  }

  .content_item{
    width: 100%;
  }

  .item_image {
    aspect-ratio: 664/980;
  }
  .item_textBox {
    aspect-ratio: 664/80;
  }
}

/* sp コンテンツ幅を下回る時*/
@media screen and (max-width: 764px) {
  .main {
    margin: 0 auto 15vw;                          /* mainとfooterの間に120pxの空き */
  }

  .topic_h2 {
    font-size: clamp(1.6rem, 4.8vw, 3.2rem);
  }
  
  .new {
    width: 9vw;
    height: 9vw;
  
    font-size:  clamp(1rem, 2.6vw, 2rem);

    top: -3.4vw;
    left: -3.4vw;
  }

  .contents_box{
    gap:  clamp(2rem, 5.2vw ,4rem);
  }

  .item_textTitle {
    height: clamp(2.6rem, 6.5vw ,5rem);
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    line-height: 1.25;
    margin-bottom: clamp(0.5rem, 1.3vw, 1rem)
  }
  
  .item_textTopic {
    font-size: clamp(1rem, 2.1vw, 1.6rem);
  }

  .top_button {
    width: 9vw;
    height: 9vw;
  
    font-size: clamp(1rem, 2.6vw, 2rem);

    bottom: 3.2vw;
    right: 3.2vw;
  }
}

/* =============================== 
footer
================================ */

.footer{
  background-image: url(../images/common/jigsaw_short.svg);
  background-repeat: repeat;
  background-size: 70rem auto;
  border-top: 0.1rem solid var(--primary-darkGreen);
}

.footer_box {
  width: var(--contentWidth);
  height: auto;
  aspect-ratio: 1300/470;                         /* pc */
  margin: 0 auto;
  position: relative;
}

.footer_box>div{
  margin-right: -4rem;                            /* 子要素同士の間隔 */
}

.footer_box>div:last-child{
  margin-right: 0;
}

.footer_decoration {
  width: 42rem;
  height: 52rem;
  background-image: url(../images/common/jigsaw_deco.svg);
  background-repeat: no-repeat;
  border-radius: 38% 40% 40% 40%;

  position: absolute;
  top: -12rem;
  left: -3.5rem;
}

.link_box {
  width: 42rem;                                   /* pc */
  aspect-ratio: 420/466;
  height: 100%;                                   /* safariの表示崩れ対策 */

  border: solid white;
  border-width: 10rem 12rem 10rem;
  border-image-source: url(../images/footer/link_deco.svg);   /* 枠線に画像を指定する */
  border-image-slice: 96 110 114 108 fill;

  position: absolute;
  top: 0;
  right: 50%;

  z-index: 1;
}

.item_box {
  height: 100%;
  padding: 0 1rem 1rem;
  display: flex;
  flex-flow: column;                              /* 子要素を縦並び */
  justify-content: space-between;                 /* 親要素の高さに均等に配置する */
}

.link_item{
  color: white;
  font-size: 2.4rem;
  text-align: left;
  transition : color 0.5s ease 0s;
}

.link_item:hover {
  color: var(--primary-black);
}

.link_item:active {
  transition-duration: .1s;
}

.ad_box {
  width: 63rem;
  height: auto;
  aspect-ratio: 63/34;
  
  margin: 6rem 0;
  padding-top: 5rem;
  text-align: center;

  background-color: var(--primary-green);
  position: absolute;
  bottom:  0;
  right: 0;
}

.ad_deco_top, .ad_deco_bottom,
.ad_deco_right, .ad_deco_left{
  content: "";
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
}

.ad_deco_top{                                     /* 上の枠画像 */
  width: 63rem;
  height: auto;
  aspect-ratio: 63/12;
  background-image: url(../images/footer/ad_deco1.svg);
  top: -6rem;
  left: 0;
}

.ad_deco_bottom{                                  /* 下の枠画像 */
  width: 63rem;
  height: auto;
  aspect-ratio: 63/12;
  background-image: url(../images/footer/ad_deco3.svg);
  left: 0;
  bottom: -6rem;
}

.ad_deco_right{                                   /* 右の枠画像 */
  width: 12rem;
  height: auto;
  aspect-ratio: 12/47;
  background-image: url(../images/footer/ad_deco2.svg);
  top: -7rem;
  right: -6rem;
}

.ad_deco_left{                                    /* 左の枠画像 */
  width: 12rem;
  height: auto;
  aspect-ratio: 12/47;
  background-image: url(../images/footer/ad_deco4.svg);
  top: -7rem;
  left: -6rem;
}

.ad_item {
  font-size: 2rem;
}

.copy_area {
  width: 100%;
  height: 12rem;
  background: var(--primary-darkGreen);
  display: flex;
  justify-content: center;                         /*左右中央揃え*/
  align-items: center;                             /*上下中央揃え*/
}

.copy {
  color: white;
  font-size: 2rem;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1370px) { 
  .footer_box{
    aspect-ratio: 1300/1400;
  }

  .link_box {
    right: 0;                                           /* ad_boxの右側の見た目と合わせた */
    height: 50.8%;                                      /* safariの表示崩れ対策 */
  }

  .ad_box {
    width: 100%;
  }

  .ad_deco_top{
    width: 100%;
    aspect-ratio: 63/9.5;
  }

  .ad_deco_bottom{
    width: 100%;
    aspect-ratio: 63/9.5;
  }

  .ad_deco_right{                                       /* 右の枠画像 */
    aspect-ratio: 12/50;
    top: -2rem;
  }

  .ad_deco_left{                                        /* 左の枠画像 */
    aspect-ratio: 12/50;
    top: -2rem;
  }
}

/* sp */
@media screen and (max-width: 922px) {   
  .footer_box{
    aspect-ratio: 664/820;
  }

  .footer_decoration {
    left: -5rem;
  }

  .link_box {
    height: 57%;                                        /* safariの表示崩れ対策 */
  }

  .ad_deco_top{
    aspect-ratio: 63/12;
  }

  .ad_deco_bottom{
    aspect-ratio: 63/12;
  }

  .ad_deco_right{                                       /* 右の枠画像 */
    aspect-ratio: 12/47;
    top: -5rem;
  }

  .ad_deco_left{                                        /* 左の枠画像 */
    aspect-ratio: 12/47;
    top: -5rem;
  }
}

/* sp コンテンツ幅を下回る時*/
@media screen and (max-width: 764px) {
  .footer{
    background-size: 92vw auto;
  }

  .footer_decoration {
    width: 58.7%;
    height: auto;
    aspect-ratio: 420/520;
    top: -15vw;
    left: 0;
  }

  .link_box{
    width: 63.25%;
    border-width: 13.1vw 14.4vw 15.7vw;
    border-image-slice: 25% fill;
    right: 4.2vw;
  }

  .item_box {
    padding: 0 1vw 1vw;
  }

  .link_item{
    font-size: clamp(1rem, 3.6vw, 2.4rem);
  }

  .ad_box {
    margin: 7.85vw 0;
    padding-top: 6.5vw;
  }

  .ad_deco_top{
    aspect-ratio: 63/12;
    top: -7.85vw;
  }

  .ad_deco_bottom{
    aspect-ratio: 63/12;
    bottom: -7.85vw;
  }

  .ad_deco_right{                                       /* 右の枠画像 */
    width: 16vw;
    aspect-ratio: 16/56;
    top: -5vw;
    right: -6vw;
  }

  .ad_deco_left{                                        /* 左の枠画像 */
    width: 16vw;
    aspect-ratio: 16/56;
    top: -5vw;
    left: -6vw;
  }

  .ad_item {
    font-size: clamp(1rem, 2.6vw, 2rem);
  }

  .copy_area {
    height: 15.7vw;  
  }
  
  .copy {
    font-size: clamp(1rem, 2.6vw, 2rem);
  }
}