* ,h2,h3,h4,h5,p{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.u-onlysp {
  display: block;
}
@media (min-width: 768px) {
  .u-onlysp {
    display: none;
  }
}
.u-onlypc {
  display: none;
}
@media (min-width: 768px) {
  .u-onlypc {
    display: block;
  }
}

@media (max-width: 767px) {
  .u-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

#ai .ai_title img {
  width: 100%;
  max-width: 1200px;
  display: block;
  margin: 0 auto calc(40 / 1366 * 100vw);
}

@media screen and (max-width:768px) {
  #ai .ai_title img {
    margin-bottom: 32px;
  }
}

@media screen and (min-width:1367px) {
  #ai .ai_title img {
    margin: 0 auto 40px;
  }
}

#ai {
  padding-bottom: 64px;
}

#ai .ai_texts {
  width: 100%;
  max-width: 1200px;
  display: block;
  text-align: left;
  margin: 0 auto calc(32 / 1366 * 100vw);
  padding: 0 calc(64 / 1366 * 100vw);
}

#ai .ai_texts .ai_text {
  font-size: 16px;
  margin: 0 auto calc(32 / 1366 * 100vw);
}

#ai .ai_texts .ai_text_note {
  font-size: 12px;
}

@media screen and (min-width:1367px) {
  #ai .ai_texts .ai_text {
    font-size: 16px;
    margin: 0 auto 32px;
  }
}

@media screen and (max-width:768px) {
  #ai .ai_texts .ai_text {
    margin: 0 auto 24px;
  }

  #ai .ai_texts {
    margin: 0 auto 24px;
    padding: 0 32px;
  }
}

#ai .ai_YT img {
  width: 100%;
  max-width: 720px;
  display: block;
  text-align: center;
  margin: 0 auto calc(64 / 1366 * 100vw);
}

@media screen and (min-width:1367px) {
  #ai .ai_YT img {
    margin: 0 auto 64px;
  }
}

#ai .ai_YT .ai_YT_text {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  max-width: 1080px;
  /* text-align: left; */
  display: block;
  margin: calc(64 / 1366 * 100vw) auto 0;
  padding: 0 calc(64 / 1366 * 100vw);
}

@media screen and (min-width:1367px) {
  #ai .ai_YT .ai_YT_text {
    margin: 64px auto 0;
    padding: 0 64px;
  }
}

@media screen and (max-width:768px) {
  #ai .ai_YT img {
    margin: 0 auto 64px;
  }

  #ai .ai_YT .ai_YT_text {
    margin: 64px auto 0;
    padding: 0 32px;
  }
}

#ai .ai_carousel {
  width: 100%;
  max-width: 1080px;
  display: block;
  text-align: left;
  margin: calc(64 / 1366 * 100vw) auto 0;
  position: relative;
}

#ai .ai_carousel .ai_carousel__inner {
  padding: 0 calc(64 / 1366 * 100vw);
}

#ai .ai_carousel .ai_carousel__inner--slider {
  padding: 0 calc(104 / 1366 * 100vw);
}

#ai .ai_carousel_text {
  font-size: 16px;
}

@media screen and (min-width:1367px) {
  #ai .ai_carousel {
    margin: 64px auto 0;
  }

  #ai .ai_carousel .ai_carousel__inner {
    padding: 0 64px;
  }

  #ai .ai_carousel .ai_carousel__inner--slider {
    padding: 0 104px;
  }

}

@media screen and (max-width:768px) {
  #ai .ai_carousel {
    margin: 64px auto 0;
    /* padding: 0 32px; */
  }

  #ai .ai_carousel .ai_carousel__inner {
    padding: 0 32px;
  }

  #ai .ai_carousel .ai_carousel__inner--slider {
    padding: 0;
  }

  #ai .ai_carousel_text:first-of-type {
    font-size: 16px;
  }

  #ai .ai_carousel_text {
    font-size: 16px;
  }
}

.ai_products{
  width: 100%;
  max-width: 1200px;
  margin: min(80px, calc(80 / 1366 * 100vw)) auto 0;
  padding: calc(32 / 1366 * 100vw) min(60px, calc(60 / 1366 * 100vw));
  background: url(../images/bg_products.png) no-repeat center center / cover;
}

.ai_products h2{
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(94, 0, 111, .5);
}

.ai_products__list {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding: min(40px, calc(40 / 1366 * 100vw)) min(45px, calc(45 / 1366 * 100vw));
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 0 8px rgba(94, 0, 111, .7);
}

.ai_products__item {
  width: 30%;
}

.ai_products__item p{
  font-size: 20px;
  color: #000;
  line-height: 1.2;
  text-align: center;
}

.ai_products__item figure{
  margin-top: 20px;
}

.ai_products__item img{
  width: 100%;
  max-width: 100%;
}

.ai_products__item a{
  display: block;
  width: 233px;
  margin-top: 20px;
  margin-inline: auto;
  font-size: 14px;
  padding: 16px 0 16px 24px;
  color: #fff;
  border-radius: 50px;
  background-color: #2D75C7;
  position: relative;
}

.ai_products__item a::after{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-55%) rotate(45deg);
}

.ai_products__item a:hover{
  color: #fff;
  text-decoration: none;
  background-color: #719ED6;
}

@media screen and (max-width:768px) {
  .ai_products{
    margin: 32px auto 0;
    padding: 32px;
    background: url(../images/bg_products_sp.png) no-repeat center center / cover;
  }
  
  .ai_products h2{
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  
  .ai_products__list {
    flex-direction: column;
    padding: 40px 43px;
  }
  
  .ai_products__item {
    width: 100%;
  }
  
  .ai_products__item:nth-child(n + 2) {
    margin-top: 48px;
  }
  
  .ai_products__item a{
    width: 100%;
  }
  
}


.c5-heading {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 30px;
  margin-top: 28px;
  margin-bottom: 22px;
}

.c5-heading .c5-heading-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: inline;
  margin: 0;
}

.stp-nav--with-legacy .spWrapper {
  padding: 0;
}

.spWrapper {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .spWrapper {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
  }

  .stp-nav--with-legacy {
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .c5-title {
    width: 100%;
    max-width: none;
    padding: 0 20px;
    margin-top: calc((65 / 767) * 100vw);
    margin-bottom: calc((35 / 767) * 100vw);
  }

  .c5-title .c5-title-img {
    width: calc((495 / 767) * 100vw);
  }

  .c5-heading {
    width: 100%;
    max-width: none;
    padding: 0 20px;
    margin-top: calc((65 / 767) * 100vw);
    margin-bottom: calc((35 / 767) * 100vw);
  }

  .c5-heading .c5-heading-img {
    width: calc((495 / 767) * 100vw);
  }
}


.v2modal {
  align-items: center;
  background-color: rgba(0, 0, 0, .9);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity .25s, visibility .25s;
  visibility: hidden;
  width: 100%;
  z-index: 10000
}

.v2modal.-isActive {
  opacity: 1;
  visibility: visible
}

.v2modal__dialog {
  background-color: transparent;
  color: #262626;
  display: block;
  max-width: 1200px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 73%;
  z-index: 2
}

.v2modal__dialog>div {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative
}

.v2modal__overlayHandler {
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  width: 100%
}

.v2modal__closeButton,
.v2modal__overlayHandler {
  display: block;
  padding: 0;
  position: absolute;
  top: 0
}

.v2modal__closeButton {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  /* height: pixelToVw(70); */
  opacity: .8;
  right: 0;
  text-align: center;
  transition: .2s;
  /* width: pixelToVw(70); */
  z-index: 2
}

.v2modal__closeButton span {
  display: block;
  height: 100%;
  position: relative;
  transition: .2s;
  width: 100%
}

.v2modal__closeButton span:after,
.v2modal__closeButton span:before {
  background: #fff;
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 50%
}

.v2modal__closeButton span:before {
  transform: translateX(-50%) rotate(-45deg)
}

.v2modal__closeButton span:after {
  transform: translateX(-50%) rotate(45deg)
}

.v2modal__closeButton:focus,
.v2modal__closeButton:hover {
  opacity: 1
}

.v2modal__image {
  display: block;
  height: auto;
  width: 100%
}

.js-v2modal {
  /* -webkit-appearance:none; */
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0
}

/*------------------ -----------------*/
/*-------- 241202_追記 -----------------*/
/*------------------ -----------------*/

[data-color='blue'] {
  --custom-color: #3A2FBC;
}

[data-color='pink'] {
  --custom-color: #B7469D;
}

button {
  all: unset;
}

.btn-container {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0;
  border-bottom: 4px solid #DDDDDD;
}

.btn-container .btn{
  width: 224px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 16px 16px 0 0 ;
  transition: .3s;
}

.btn-container .btn[aria-selected='true']{
  color: #fff;
  background-color: var(--custom-color);
}

.btn-container .btn[aria-selected='false']{
  color: #909090;
  background-color: #F2F2F2;
}

.btn-container .btn[aria-selected='false']:hover{
  color: #fff;
  background-color: var(--custom-color);
}

.btn-container .btn svg{
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.btn-container .btn svg path{
  transition: .3s;
}

.btn-container .btn[aria-selected='true'] svg path{
  fill: #fff;
}

.btn-container .btn[aria-selected='false'] svg path{
  fill: #909090;
}

.btn-container .btn[aria-selected='false']:hover svg path{
  fill: #fff;
}

@media screen and (max-width: 767px) {
  .btn-container {
    display: flex;
  }
  
  .btn-container .btn{
    width: 50%;
    height: 48px;

    &[aria-controls=xperia_ai] {
      width: calc(214 / 390 * 100vw);
    }
  }
  
}

.tab-container {
  padding-top: 64px;
}

.section {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding: 0 min(64px, calc(64 / 1366 * 100vw));
}

@media screen and (max-width: 767px) {
  .section {
    padding: 0 32px;
  }
}

.recommend h2.heading {
  font-size: 48px;
  font-weight: 700;
  color: var(--custom-color);

  + .logo {
    margin-top: min(30px, calc(30 / 1366 * 100vw));
  }
}

.heading {
  line-height: 1.3;
}

h3.heading {
  font-size: 32px;
  font-weight: 700;

  + .logo {
    margin-top: min(30px, calc(30 / 1366 * 100vw));
  }
}

h4.heading {
  font-size: 28px;
  font-weight: 700;
}

.sub-heading {
  font-size: 20px;
  font-weight: 700;
  margin-top: min(40px, calc(40 / 1366 * 100vw));
}

.description {
  margin-top: min(24px, calc(24 / 1366 * 100vw));
  font-size: 16px;
  line-height: 1.7;
}

h2 + .description {
  margin-top: min(48px, calc(48 / 1366 * 100vw));
}

h3 + .description {
  margin-top: min(40px, calc(40 / 1366 * 100vw));
}

h4 + .description {
  margin-top: min(25px, calc(25 / 1366 * 100vw));
}

h5 + .description {
  margin-top: min(24px, calc(24 / 1366 * 100vw));
}

.ai_carousel__inner--slider {
  margin-top: min(24px, calc(24 / 1366 * 100vw));
}

.note {
  margin-top: min(20px, calc(20 / 1366 * 100vw));
  font-size: 12px;
}

.note span{
  display: block;
}

.note span:not(:first-child){
  margin-top: min(8px, calc(8 / 1366 * 100vw));

}

.note .indent{
  padding-left: 1rem;
  text-indent: -1rem;
}

.note .indent--number{
  padding-left: 2rem;
  text-indent: -2rem;
}

@media screen and (max-width: 767px) {
  .recommend h2.heading {
    font-size: 36px;

    + .logo {
      margin-top: 25px;
    }
  }
  
  h3.heading {
    font-size: 28px;

    + .logo {
      margin-top: 25px;

      &.bravia {
        height: 21px;
        width: 208px;
      }
    }
  }
  
  h4.heading {
    font-size: 20px;
    line-height: 1.3;
  }
    
  .sub-heading {
    font-size: 18px;
    margin-top: 24px;
  }

  .description {
    margin-top: 24px;
  }
  
  h2 + .description {
    margin-top: 48px;
  }
  
  h3 + .description {
    margin-top: 40px;
  }
  
  h4 + .description {
    margin-top: 32px;
  }
  
  h5 + .description {
    margin-top: 18px;
  }
  
  .ai_carousel__inner--slider {
    margin-top: 24px;
  }
  
  .note {
    margin-top: 24px;
  }

}


.gemini .heading {
  width: 586px;
}

.gemini .heading img{
  width: 100%;
}

.stp-modal-trigger {
  margin-top: min(40px, calc(40 / 1366 * 100vw));

  .img > & {
    margin-top: 0;
  }
}

.u-mt-64 {
  margin-top: min(64px, calc(64 / 1366 * 100vw));
}

@media screen and (max-width: 767px) {
  .gemini .heading {
    width: 326px;
  }
  
  .stp-modal-trigger {
    margin-top: 32px;
  }
  
  .u-mt-64 {
    margin-top: 64px;
  }
}

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

.text,.img {
  width: 48%;
}

.img img {
  width: 100%;
}

.idea .text{
  width: 65%;
}

.idea .img {
  width: 31%;
}

@media screen and (max-width: 767px) {
  .flex {
    flex-direction: column;
    row-gap: 24px;
  }
  
  .text,.img {
    width: 100%;
  }
  
  .img img {
    width: 100%;
  }
  
  .idea .text{
    width: 100%;
  }

  .idea .img{
    width: 100%;
  }
  
}

.footer-tab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 480px;
  height: 65px;
  margin: min(80px, calc(80 / 1366 * 100vw)) auto 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  background-color: var(--custom-color);
  transition: .3s;
}

.footer-tab-button svg{
  vertical-align: text-top;
  transform: translateX(8px);
  transition: .3s;
}

.footer-tab-button:hover{
  opacity: 0.8;
  color: #fff;
  text-decoration: none;
}

.footer-tab-button:hover svg{
  transform: translateX(16px);
}

@media screen and (max-width: 767px) {
  .footer-tab-button {
    width: 326px;
    height: 65px;
    margin: 64px auto 0;
  }  
}

@media screen and (max-width: 767px) {
  .xperia_ai .flex {
    gap: 0;
  }

  .xperia_ai .flex .text {
    display: contents;
  }

  .xperia_ai .flex .heading {
    order: 1;
  }
  .xperia_ai .flex .description {
    margin-top: 24px;
    order: 3;
  }
  .xperia_ai .flex .note {
    margin-top: 16px;
    order: 4;
  }
  .xperia_ai .flex .img {
    margin-top: 24px;
    order: 2;
  }

}

.xperia_ai h3 + .flex {
  margin-top: min(60px, calc(60 / 1366 * 100vw));
}

.xperia_ai .flex {
  margin-top: min(35px, calc(35 / 1366 * 100vw));
}

@media screen and (max-width: 767px) {
  .xperia_ai h3 + .flex {
    margin-top: 48px;
  }
  
  .xperia_ai .flex {
    margin-top: 35px;
  }
}

.content[aria-hidden="false"] {
  display: block;
}
.content[aria-hidden="true"] {
  display: none;
}

.stp-nav--with-legacy {
  margin-left: 0;
  padding-left: 0;
}


/*------------------ -----------------*/
/*-------- 250307_追記 -----------------*/
/*------------------ -----------------*/
.yt-shorts {
  margin-top: 0;
}

.yt-shorts .yt-shorts__inner{
  width: 100%;
  padding-top: 180%;
}

.yt-shorts-modal__inner {
  width: 40%;
  max-width: 333px;
}

.yt-shorts-modal__content {
  padding-top: 180%;
}

@media screen and (max-width:768px) {
  .yt-shorts-modal__inner {
    width: 66%;
    max-width: none;
  }
  
}