@charset "utf-8";
/* CSS Document */
/* GSAPアニメーションのちらつき防止 兼 初期状態 */
.burst-element {
  opacity: 0;
  visibility: hidden;
  /* ★JSの from の内容（初期状態）をCSSに記述 */
  transform: translate(100px, 100px) scale(0.5) rotate(15deg);
}
.pop-element {
  opacity: 0;
  visibility: hidden;
  /* ★JSの from の内容（初期状態）をCSSに記述 */
  transform: scale(0.3);
}
/* ★.js-fade-up も同様に初期状態をCSSで定義 (前回対応済み) */
.js-fade-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
}
/*===============================================
●pc.css
===============================================*/
@media screen and (min-width:737px) {
  #ryuji_cp {
    max-width: 1200px;
    margin: 0 auto;
    color: #000;
  }
  #ryuji_cp .full_bgY {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    background-color: #fdd400;
    padding: 1.5rem 0 1rem;
  }
  #ryuji_cp .full_bgB {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    background-color: #000;
    padding: 0;
  }
  #ryuji_cp .full_bgB2 {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    background-color: #000;
    padding: 0;
  }
  #ryuji_cp section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  #ryuji_cp img {
    width: 100%;
    height: auto;
  }
  #ryuji_cp .pc-none {
    display: none;
  }
  #ryuji_cp .tit_area {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    /*padding-bottom: 52.5%*/
  }
  #dogday .tit_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
  }
  #ryuji_cp .youtube {
    position: absolute;
    top: 1%;
    left: 23%;
    width: 32%;
    height: auto;
  }
  #ryuji_cp .tit {
    position: absolute;
    top: 10%;
    left: 16.5%;
    width: 44.5%;
    height: auto;
  }
  #ryuji_cp .fuki {
    position: absolute;
    top: 3%;
    left: 1%;
    z-index: 10;
    width: 12%;
    height: auto;
  }
  #ryuji_cp h1 {
    margin: 0;
    padding: 0;
    font-size: 2.1rem;
    text-align: center;
    font-weight: 800;
  }
  #ryuji_cp .lead {
    margin: .5rem 0;
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
  }
  #ryuji_cp .lead > span {
    font-size: 80%;
  }
  #ryuji_cp ul, #ryuji_cp li, #ryuji_cp dl, #ryuji_cp dt, #ryuji_cp dd {
    margin: 0;
    list-style: none;
    padding: 0;
    margin-left: 5px;
  }
  #ryuji_cp .title {
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.226rem + 0.43vw, 1.75rem);
    padding: .5rem 1rem;
    margin: 1rem 0 2rem;
  }
  #ryuji_cp .title span {
    position: relative;
    padding: .5rem 3rem;
    font-weight: 600;
    text-align: center;
    z-index: 0;
    filter: drop-shadow(5px 5px 0px #f29200);
  }
  #ryuji_cp .title span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdd400;
    transform: skew(-25deg);
    content: '';
    z-index: -1;
  }
  #ryuji_cp .title02 {
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.226rem + 0.43vw, 1.75rem);
    padding: .5rem 1rem;
    margin: 2rem 0 2rem;
  }
  #ryuji_cp .title02 span {
    position: relative;
    padding: .5rem 3rem;
    font-weight: 600;
    text-align: center;
    color: #fdd400;
    z-index: 0;
    filter: drop-shadow(5px 5px 0px #f29200);
  }
  #ryuji_cp .title02 span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: skew(-25deg);
    content: '';
    z-index: -1;
  }
  #ryuji_cp .question {
    font-size: 1.1rem;
    font-weight: 600;
    padding-left: 60px;
    position: relative;
    margin: 30px 0 20px 0;
  }
  #ryuji_cp .question:before {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 14px;
    left: 0;
  }
  #ryuji_cp .answer {
    font-size: 1.1rem;
    line-height: 1.7;
  }
  #ryuji_cp .prof_block {
    width: 90%;
    background-color: #000;
    color: #fff;
    margin: 2rem auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: .3fr 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0rem;
    font-size: 1.05rem;
    line-height: 1.7;
  }
  #ryuji_cp .profile_text dt {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
  }
  #ryuji_cp .profile_text dd {
    font-size: 1rem;
  }
  #ryuji_cp .profile_img {
    grid-area: 2 / 1 / 3 / 2;
  }
  #ryuji_cp .profile_text {
    grid-area: 2 / 2 / 3 / 3;
  }
  /*=======item_area=========*/
  .grid_container {
    width: 100%;
    margin: 1rem auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 2列のグリッド */
    gap: 20px; /* グリッド間の間隔 */
  }
  .grid_item {
    margin: 0;
    padding: 1rem;
    background-color: #fff;
  }
  .grid_item01 {
    margin: 0;
    padding: 0;
  }
  .grid_item img {
    /*border: solid 1px #ccc;
    border-radius: 10px;*/
    margin-bottom: 10px;
  }
  .name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }
  .name > span {
    font-size: 80%;
  }
  .item_aten {
    margin: 1% 0;
    font-size: .9rem;
    line-height: 1.4em;
    padding-top: 1.5%;
  }
  .item_txtR {
    margin: 1% 0 0;
    font-size: 1.0rem;
    line-height: 1.4em;
    text-align: right;
  }
  .item_txt {
    margin: 1% 0 0;
    font-size: 0.95rem;
    line-height: 1.6em;
    text-align: left;
  }
  .item_txt > span {
    font-size: 90%;
  }
  #ryuji_cp .date {
    text-align: left;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.383rem + 0.69vw, 0.9rem);
    padding: 0;
    margin: 0 0 0.5rem 0.5rem;
  }
  #ryuji_cp .date span {
    display: inline-block;
    position: relative;
    padding: .3rem 0.8rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.05em;
    z-index: 0;
  }
  #ryuji_cp .date span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdd400;
    transform: skew(-25deg);
    content: '';
    z-index: -1;
  }
  #ryuji_cp .bg-rays-fade {
    width: 100%;
    min-height: 1000px;
    /* 1. 一番下の背景色（黒） */
    background-color: #000000;
    background-image: /* * (上層)  */ radial-gradient(circle at right bottom, transparent 20%, #000000 50%), /*  (下層)「放射線」 */ repeating-conic-gradient(from -90deg at right bottom, rgba(254, 212, 0, 1) 0deg 4deg, transparent 4deg 10deg);
    background-repeat: no-repeat;
    padding: 2rem 0;
  }
}
/*===============================================
●sp.css 画面の横幅が737px以上
===============================================*/
@media screen and (max-width:736px) {
  #anc01 {
    margin-top: -54px;
    padding-top: 54px;
  }
  #ryuji_cp .sp-none {
    display: none;
  }
  #ryuji_cp {
    margin: 0 calc(50% - 50vw);
    background-color: #fdd400;
    padding: 0;
    margin-top: -10px;
    color: #000;
  }
  #ryuji_cp ul, #ryuji_cp li, #ryuji_cp dl, #ryuji_cp dt, #ryuji_cp dd {
    margin: 0;
    list-style: none;
    padding: 0;
    margin-left: 5px;
  }
  #ryuji_cp .full_bgY {
    margin: 0 calc(50% - 50vw);
    background-color: #fdd400;
    padding: 1.5rem 0 1rem;
  }
  #ryuji_cp .full_bgB {
    margin: 0 calc(50% - 50vw);
    background-color: #000;
    padding: 0;
  }
  #ryuji_cp .full_bgB2 {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0;
  }
  #ryuji_cp section {
    width: 90%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  #ryuji_cp img {
    width: 100%;
    height: auto;
  }
  #ryuji_cp .tit_area {
    width: 100%;
    position: relative;
  }
  #dogday .tit_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #ryuji_cp .youtube {
    position: absolute;
    top: 1%;
    left: 36%;
    width: 50%;
    height: auto;
  }
  #ryuji_cp .tit {
    position: absolute;
    top: 9%;
    left: 26.5%;
    width: 70%;
    height: auto;
  }
  #ryuji_cp .fuki {
    position: absolute;
    top: 2%;
    left: 3%;
    z-index: 10;
    width: 17%;
    height: auto;
  }
  #ryuji_cp h1 {
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 800;
  }
  #ryuji_cp .lead {
    margin: .5rem 0;
    padding: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
  }
  #ryuji_cp .lead > span {
    font-size: 80%;
  }
  #ryuji_cp .title {
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
    padding: .5rem 1rem;
    margin: 1rem 0 2rem;
  }
  #ryuji_cp .title span {
    position: relative;
    display: inline-block;
    padding: .5rem 2rem;
    font-weight: 600;
    text-align: center;
    z-index: 0;
    filter: drop-shadow(5px 5px 0px #f29200);
  }
  #ryuji_cp .title span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdd400;
    transform: skew(-25deg);
    content: '';
    z-index: -1;
  }
  #ryuji_cp .title02 {
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
    padding: .5rem 0;
    margin: 1rem 0 2rem;
  }
  #ryuji_cp .title02 span {
    position: relative;
    display: inline-block;
    padding: .5rem 2rem;
    font-weight: 600;
    text-align: center;
    color: #fdd400;
    z-index: 0;
    filter: drop-shadow(5px 5px 0px #f29200);
  }
  #ryuji_cp .title02 span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: skew(-25deg);
    content: '';
    z-index: -1;
  }
  #ryuji_cp .question {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 50px;
    position: relative;
    margin: 20px 0 10px 0;
  }
  #ryuji_cp .question:before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 14px;
    left: 0;
  }
  #ryuji_cp .answer {
    font-size: 1rem;
    line-height: 1.6;
  }
  #ryuji_cp .prof_block {
    width: 90%;
    background-color: #000;
    color: #fff;
    margin: 2rem auto;
    padding: 1.5rem 1rem;
    display: grid;
    grid-template-columns: .3fr 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  #ryuji_cp .prof_block {
    display: flex;
    flex-direction: column;
  }
  #ryuji_cp .profile_img {
    width: 50%;
    margin: 0 auto 0rem;
    order: 1;
  }
  #ryuji_cp .profile_text {
    padding-top: 1rem;
    order: 2;
  }
  #ryuji_cp .profile_text dt {
    margin-bottom: .5rem;
    font-size: 1.1rem;
    font-weight: 600;
  }
  #ryuji_cp .profile_text dd {
    font-size: 0.9rem;
  }
  /*=======item_area=========*/
  .grid_container {
    width: 94%;
    margin: 1rem auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1列のグリッド */
    gap: 25px; /* グリッド間の間隔 */
  }
  .grid_item {
    margin: 0;
    padding: 1rem;
    background-color: #fff;
  }
  .grid_item01 {
    margin: 0;
    padding: 0;
  }
  .grid_item img {
    /*border: solid 1px #ccc;
    border-radius: 10px;*/
    margin-bottom: 10px;
  }
  .name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }
  .name > span {
    font-size: 80%;
  }
  .item_aten {
    margin: 1% 0;
    font-size: .9rem;
    line-height: 1.4em;
    padding-top: 1.5%;
  }
  .item_txtR {
    margin: 1% 0 0;
    font-size: 1.0rem;
    line-height: 1.4em;
    text-align: right;
  }
  .item_txt {
    margin: 1% 0 0;
    font-size: 0.9rem;
    line-height: 1.6em;
    text-align: left;
  }
  .item_txt > span {
    font-size: 85%;
  }
  #ryuji_cp .date {
    text-align: left;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0;
    margin: 0 0 0.5rem 0.5rem;
  }
  #ryuji_cp .date span {
    display: inline-block;
    position: relative;
    padding: .3rem 0.8rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.05em;
    z-index: 0;
  }
  #ryuji_cp .date span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdd400;
    transform: skew(-25deg);
    content: '';
    z-index: -1;
  }
  #ryuji_cp .bg-rays-fade {
    background-color: #000;
    padding: 1rem 0;
  }
}