@charset "utf-8";

/*PCSP共通設定*/

html {scroll-behavior: smooth;}/*smooth scroll*/



/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}
	
	
section#profile{
	background:url(../images/back_sp.svg) repeat-y top #ffe5e9;
	background-position: center center;
	background-size: cover;}
section#sns{background:#fff3f7;}
	
section#profile{padding-top: 1rem;}
section#special{padding-bottom: 2rem;}
section#sns{padding: 2rem 0;}	
	
/* CSS */
#dirPathBlock,
#anchorLinkBlock {
	font-size: 10px;
	margin: 1% 1% 0 1%;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 12px;
	margin: 0 1%;
}

.inner{
	width: 92%;
	margin: 0 auto;
	padding: 24px 0;
	box-sizing: border-box;
}


    h2 {
		      display: flex;
      align-items: center;
      justify-content: center;
        text-align: center;
        font-size: 3rem;
        font-family: "游明朝", "Yu Mincho", "Hiragino Mincho Pro", serif;
        font-style: italic;
        color: #e1778c;
        margin-bottom: 1.5rem;
    }
	
	    h2.title::before,
    h2.title::after {
      content: "";
      flex: 1;
      height: 2px;
      background-color: #e1778c;
      margin: 0 12px;
    }	
	
		h2.title::before {margin: 0 12px 0 0;}
    h2.title::after {margin: 0 0 0 12px;}

	
    .bule_box {
      position: relative;
      padding: 20px;
      margin: 40px 0 20px 0;
    }

    .bule_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 50%;
    height: 2px;
    background-color: #5ac8ff;
    }

    .bule_box::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 2px;
    height: 50%;
    background-color: #5ac8ff;
    }

    .bule_box .corner_br_h,
    .bule_box .corner_br_v {
      position: absolute;
      background-color: #5ac8ff;
      content: "";
    }

    .bule_box .corner_br_h {
    bottom: 0;
    right: -10px;
    width: 50%;
    height: 2px;
    }

    .bule_box .corner_br_v {
    bottom: -10px;
    right: 0;
    width: 2px;
    height: 50%;
    }	
	
/* Special SNS */	
	
	.wave{
    margin-bottom: -5px;
	}	
	.special_box{
		padding: 50px 0;
	}		
    .grid {
      display: grid;
      gap: 20px;
    }

    .box {
      background-color: #fff;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.3s ease;
    }
	


    .box img {
        width: 53%;
        object-fit: cover;
    }
	#profile.box img{height: 100%;}
	#sns.box img{height: auto;}
	
    .box_title {
      font-size: 16px;
      font-weight: bold;
      padding: 0 0 10px 0;
    }

    .box_desc {
      font-size: 14px;
      color: #333;
		line-height: 1.5;
    }
	

a.btn {
    color: #FFF!important;
    font-weight: bold;
    position: relative;	
}
    .btn {
      display: block;
      margin: 30px auto 0;
      background-color:#e1778c;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      transition: opacity 0.3s ease;
    }

      .grid {
        grid-template-columns: 1fr;
      }

	
a.btn:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}	
.box_row {
  display: block;
}	
  .box_row {
        display: flex;
        align-items: flex-start;
  }

  .box_row .box_img {
    width: 50%;
    height: auto;
    object-fit: cover;
  }

  .box_row .box_text {
        width: 45%;
        padding: 10px;
        flex: 1;
  }	
	
/* SNS */
	
.grid.sns {
    display: flex;
    gap: 10px;
}	
	#sns .box img,#sns .box_img,#sns .box_text{
        width: 100%;
	}		
    #sns .box_text {
        width: 85%;
        margin: 10px auto;
    }
	
	#sns a.box {
    flex: 1;
}
	
	
	
/* profile */	
    .profile_box {
        font-size: 16px;
		background: radial-gradient( ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.7) 80%, rgba(255, 255, 255, 0.8) 100% );
        padding: 25px;
        border-radius: 10px;
		text-align: center;
    }
	
    .profile_image {
        width: 70%;
        height: auto;
        object-fit: cover;
        margin: 0 auto;
    }
    .profile_info {
        padding: 30px 0;
        color: #333;
    }

    .info_list {
        list-style: none;
        margin: 0 0 20px 0;
        color: #333;
    }

    .info_list li {
        margin-bottom: 20px;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .label {
        background-color: #ffd3db;
        color: #333;
        padding: 4px 10px 4px;
        display: inline-block;		
        min-width: 6em;
        text-align: center;
        margin: 0 0 6px;
    }
    #profile p {
        line-height: 1.6;
        color: #333;
		text-align: left;
    }
	
    .description {
        line-height: 1.6;
        color: #333;
		text-align: left;
    }
}

/*760px以上*/
@media screen and (min-width: 760px),print {
section#profile{padding-top: 25px;}
section#special{padding-bottom: 50px;}
section#sns{padding: 50px 0;}	
	
section#profile{
	background:url(../images/back.svg) no-repeat top #ffe5e9;
	background-position: center center;
	background-size: cover;}
section#sns{background:#fff3f7;}	
	
/* CSS */
#wrapper {line-height: 1.231;}
#dirPathBlock,
h1,
.iframe_end-content_gadget,
#anchorLinkBlock{
	width: 100%;
	max-width:970px;
	min-width:760px;
	margin: auto;
}

/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 14px;
    width: auto;
	max-width:970px;
	min-width:760px;
    margin: 0 auto 5px;
}

.inner{
	width: 96%;
	max-width:970px;
	min-width:760px;
	margin: 0 auto;
	padding:25px 0;
	display: block;
}

    h2 {
		display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 45px;
        font-family: "游明朝", "Yu Mincho", "Hiragino Mincho Pro", serif;
        font-style: italic;
        color: #e1778c;
        margin: 15px auto 35px;
        letter-spacing: 5px;
        font-weight: bold;
    }

	    h2.title::before,
    h2.title::after {
      content: "";
      flex: 1;
      height: 2px;
      background-color: #e1778c;
      margin: 0 12px;
    }

	h2.title::before {margin: 0 12px 0 0;}
    h2.title::after {margin: 0 0 0 12px;}
	
	    .bule_box {
      position: relative;
      padding: 20px;
    }

    .bule_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 50%;
    height: 2px;
    background-color: #5ac8ff;
    }

    .bule_box::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 2px;
    height: 50%;
    background-color: #5ac8ff;
    }

    .bule_box .corner_br_h,
    .bule_box .corner_br_v {
      position: absolute;
      background-color: #5ac8ff;
      content: "";
    }

    .bule_box .corner_br_h {
    bottom: 0;
    right: -10px;
    width: 50%;
    height: 2px;
    }

    .bule_box .corner_br_v {
    bottom: -10px;
    right: 0;
    width: 2px;
    height: 50%;
    }
	
	
	/* Special SNS */	
	.wave{
    margin-bottom: -5px;
	}	
	.special_box{
		padding: 50px 0;
	}	
    .grid {
      display: grid;
      gap: 20px;
    }

    .box {
      background-color: #fff;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.3s ease;
    }

    .box:hover {
      opacity: 0.7;
    }

    .box img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .box_title {
      font-size: 18px;
      font-weight: bold;
      padding: 10px;
    }

    .box_desc {
      font-size: 14px;
      padding: 0 10px 10px;
      color: #333;
		line-height: 1.5;
    }
a.btn {
    color: #FFF!important;
    font-weight: bold;
    position: relative;	
}
	
    .btn {
        display: block;
        margin: 30px auto 0;
        background-color: #e1778c;
        color: white;
        border: none;
        padding: 20px 24px;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        transition: opacity 0.3s ease;
    }

    .btn:hover {
      opacity: 0.7;
    }

	.grid.special {
        grid-template-columns: repeat(4, 1fr);
      }
      .grid.sns {
        display: flex;
        width: 455px;
        margin: auto;
      }
	
	#sns .box{
		flex: 1;
	}

	
a.btn:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}	
	
	
/* profile */	
    .profile_box {
        font-size: 16px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background: #FFF;
        padding: 25px;
        border-radius: 10px;
        justify-content: center;
    }
    .profile_image {
        width: 26%;
        height: auto;
        object-fit: cover;
        padding: 0 5px 30px;
}
    .profile_info {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #333;
    }


    .info_list {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
      color: #333;
    }

    .info_list li {
      margin-bottom: 10px;
      white-space: nowrap;
	  display: flex;
	  align-items: center;
    }

    .label {
        background-color: #ffe5e9;
        color: #333;
        padding: 7px 10px 4px;
        display: inline-block;
        margin-right: 13px;
        min-width: 6em;
        text-align: center;
    }
	#profile p{
	 font-size: 16px;
      line-height: 1.6;
      color: #333;	
	}
	
    .description {
        background-color: #fff3f7;
        padding: 25px;
        font-size: 16px;
        line-height: 1.8;
        color: #333;
    }	
}