@charset "UTF-8";
/*各ページ独自のcss設定*/


/*以下に指定を記述する*/

/*↓これは書き方の例だから消してね*/

body{
   background-color:#fffbf8;
}

.page-title{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

h1{
   color:#333333;
   font-size:28px;
   text-align: center;
   margin-top:40px;
   font-weight: bold;
}

.linebox {
  position: relative;
  width: 265px;
  height: 4px;
  margin: 0 auto;

}

.line {
  position: absolute;
  height: 4px;
}

.line1 {
  width: 120px;
  background: #edaa0b;
  border-radius: 10px;
  z-index: 3;
  left: 0;
}

.line2 {
  width: 100px;
  background: #f3c759;
  border-radius: 0 10px 10px 0;
  z-index: 2;
  left: 105px;
}

.line3 {
  width: 80px;
  background: #f9e3aa;
  border-radius: 0 10px 10px 0;
  z-index: 1;
  right: 0;
}

.back-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: #f3c75999;
  color: white;
  padding: 10px 14px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  z-index: 999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.back-to-top:hover {
  background-color: #e07e0099;
}
 
.box{
   width:127px;
   height:108px;
   background-color:#ffffff;
   box-shadow: 1px 1px 1px #00000066;
   display: inline-block;
   background-image: linear-gradient(to bottom right, #fff 60% , #f9e3aa 100%);
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: 80px 80px;
   text-align:center;
   font-size:14px;
   color:#333333;
   position: relative;
   padding:15px;
   line-height:1.5;
   margin-top:0;
   z-index: 10;
   border: solid 1px #e5e5e5;
}

.box {
  position: relative;
  z-index: 1;
  overflow: visible; /* 下線がはみ出ても見えるように */
}

.box::after {
  content: "";
  position: absolute;
  bottom: 72px; /* ここは今の値を維持 */
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: 4px;
  background-color: #f3c75980;
  z-index: 0; /* pより背面に */
}

.box p {
  position: relative;
  z-index: 1; /* 文字を前面に */
}

.all_box{
   display:flex;
   flex-wrap:wrap;
   gap:45px;
   justify-content: center;
   margin-top: 60px;
   margin-bottom:30px;   
}


/*戻る*/
.back{
    font-size: 17px;
    font-weight: 500;
    color: #3e3a39;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    width: 180px;
    height: 45px;
    margin: 0 auto;
    margin-bottom: 90px;
    box-shadow: 1px 1px 1px #00000080;
    position: relative;
    margin-top:90px;
}

p{
   font-weight:500;
   color:#3E3A39;
   text-align: center;
   margin: 0;  
   font-size:17px;
   z-index: 1; /* ← 追加：矢印より前に出す */
}


.back::before{
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-right: 15px solid #b3b3b3;
   border-bottom: 15px solid transparent;
}

.back::after{
   content:"";
   position:absolute;
   bottom:0;
   left:0;
   border-right: 15px solid transparent;
   border-bottom: 15px solid #f3c759;

}  

.yajirushi1 {
    display: inline-block;
    width: 30px;
    height: 0.75px;
    background: #4d4d4d;
    position: absolute;
    top: 55%;
    transform: translateY(-55%);
    left: 33px;
}

.yajirushi2 {
    display: inline-block;
    width: 10px;
    height: 0.75px;
    background: #4d4d4d;
    transform: rotate(-45deg) translateY(-55%);
    transform-origin: left bottom;
    position: absolute;
    top: 55%;
    left: 33px;
}


.yajirushi-wrap {
    width: 48px;
    height: 24px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 5px;
    z-index: 0;
}


.photo1{
   height:53px;
   width:45px;
   color:#666666;
   filter: brightness(0) saturate(100%) invert(43%) sepia(0%) saturate(0%) hue-rotate(175deg) brightness(90%) contrast(86%);
   margin: 0 auto;
   display: block;
   margin-top:6px;
}

.photo2{
   height:45px;
   width:45px;
   color:#666666;
   filter: brightness(0) saturate(100%) invert(43%) sepia(0%) saturate(0%) hue-rotate(175deg) brightness(90%) contrast(86%);
   margin: 0 auto;
   display: block;
   margin-top:11px;
   margin-left: 27px;
}

a{
   text-decoration:none;
}




@media screen and (min-width:1024px) {
  body{
   background-color:#fffbf8;
}

.page-title{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

h1{
   color:#333333;
   font-size:32px;
   text-align: center;
   margin-top:40px;
   font-weight: bold;
}

.linebox {
  position: relative;
  width: 265px;
  height: 4px;
  margin: 0 auto;

}

.line {
  position: absolute;
  height: 4px;
}

.line1 {
  width: 120px;
  background: #edaa0b;
  border-radius: 10px;
  z-index: 3;
  left: 0;
}

.line2 {
  width: 100px;
  background: #f3c759;
  border-radius: 0 10px 10px 0;
  z-index: 2;
  left: 105px;
}

.line3 {
  width: 80px;
  background: #f9e3aa;
  border-radius: 0 10px 10px 0;
  z-index: 1;
  right: 0;
}

.back-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: #f3c75999;
  color: white;
  padding: 10px 14px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  z-index: 999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.back-to-top:hover {
  background-color: #e07e0099;
}
 
.all_box {
  width: 80%;
  margin: 60px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
   width: 17%;              /* 子は親幅の17% */
   min-width: 120px;        /* スマホで潰れすぎ防止（調整可） */
   background-color: #ffffff;
   box-shadow: 1px 1px 1px #00000066;
   background-image: linear-gradient(to bottom right, #fff 60%, #f9e3aa 100%);
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: 80px 80px;
   text-align: center;
   font-size: 14px;
   color: #333333;
   position: relative;
   padding: 15px;
   line-height: 1.5;
   border: solid 1px #e5e5e5;
           height: unset;
        aspect-ratio: 127 / 108;

}

.box::after {
  content: "";
  position: absolute;
  bottom: 76px; /* ここは今の値を維持 */
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: 4px;
  background-color: #f3c75980;
  z-index: 0; /* pより背面に */
}

.box p {
  position: relative;
  z-index: 1; /* 文字を前面に */
}

.back:hover{
  transform: transslateY(4px);
  box-shadow: none;
}

.box:hover{
  transform: translateY(4px);
  box-shadow: none;
}


.back_wrap:hover{
    transform: translateY(4px);


}


/*戻る*/
.back{
    font-size: 17px;
    font-weight: 500;
    color: #3e3a39;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    width: 188px;
    height: 53px;
    margin: 0 auto;
    margin-bottom: 90px;
    box-shadow: 1px 1px 1px #00000080;
    position: relative;
    margin-top:90px;
}

p{
   font-weight:500;
   color:#3E3A39;
   text-align: center;
   margin: 0;  
   font-size:18px;
   z-index: 1; /* ← 追加：矢印より前に出す */
}


.back::before{
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-right: 20px solid #b3b3b3;
   border-bottom: 20px solid transparent;
}

.back::after{
   content:"";
   position:absolute;
   bottom:0;
   left:0;
   border-right: 20px solid transparent;
   border-bottom: 20px solid #f3c759;

}  

.yajirushi1 {
    display: inline-block;
    width: 30px;
    height: 0.75px;
    background: #4d4d4d;
    position: absolute;
    top: 55%;
    transform: translateY(-55%);
    left: 33px;
}

.yajirushi2 {
    display: inline-block;
    width: 10px;
    height: 0.75px;
    background: #4d4d4d;
    transform: rotate(-45deg) translateY(-55%);
    transform-origin: left bottom;
    position: absolute;
    top: 55%;
    left: 33px;
}


.yajirushi-wrap {
    width: 48px;
    height: 24px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 5px;
    z-index: 0;
}


.photo1{
   height:53px;
   width:45px;
   color:#666666;
   filter: brightness(0) saturate(100%) invert(43%) sepia(0%) saturate(0%) hue-rotate(175deg) brightness(90%) contrast(86%);
   margin: 0 auto;
   display: block;
   margin-top:6px;
}

.photo2{
   height:45px;
   width:45px;
   color:#666666;
   filter: brightness(0) saturate(100%) invert(43%) sepia(0%) saturate(0%) hue-rotate(175deg) brightness(90%) contrast(86%);
   margin: 0 auto;
   display: block;
   margin-top:11px;
   margin-left: 27px;
}

a{
   text-decoration:none;
}
}