@charset "utf-8";

/*====================↓スライドショー====================*/


  /*スライドショー*/
  .slideshow_main{

    /*サイズ*/
    max-width: 1180px;

    /*余白*/
    margin: auto;
    padding-top:20px;

    /*位置*/
    position: relative;

    /*アニメーション*/
    transition: .3s;

  }
  @media (width <= 834px){
    .slideshow_main{
      padding-top:0px;
    }
  }






  /*スライドショー（画像枠）*/
  .slideshow_main .slideshow_image_frame{

    /*位置*/
    position: relative;

    /*デザイン*/
    border-radius: 40px; /*角丸*/
    overflow: hidden;    /*はみだした部分を切り取り*/

    /*余白*/
    margin:0px 40px 40px 40px;


    /*アニメーション*/
    transition: .3s;


  }

  @media (width <= 834px){

    .slideshow_main .slideshow_image_frame{

      /*余白*/
      margin:0px;

      /*デザイン*/
      border-radius: 0px;


    }

  }



  /*スライドショー（画像）*/
  .slideshow_main .slideshow_image{

    /*アニメーション*/
    animation: var(--keyframe-name) 20s infinite;

  }
  /*スライドショー（画像：2枚目以降）*/
  .slideshow_main .slideshow_image:nth-child(n+2){

    /*-----------------------------------------------------------------------------------------------------
      画像の2枚目以降のみ設定をする理由

      【説明】
      1枚目の画像まで position: absolute; にしてしまうと、親要素（.slideshow_image_frame）の高さが 0 になり、
      後ろに続くコンテンツが上にずれて画像と重なるレイアウト崩れが発生します。
      そのため、1枚目だけは通常の配置（static）にして親要素の高さを自然に確保し、2枚目以降をその上に重ねる構造にしています。
      -----------------------------------------------------------------------------------------------------*/

    /*位置*/
    position:absolute;
    top: 0;
    left: 0;

  }


  /*診療時間*/
  .slideshow_main .office_hours{

    /*位置*/
    position:absolute;
    bottom: -40px;
    right: 0px;

    /*サイズ*/
    width: min(440px, 45vw); /* 2つの値のうち、小さい値を選択。画面幅が大きい時は440pxを採用し、画面幅の40%のサイズが440px以下になると画面幅の40%のサイズを採用 */
    height:auto;

  }
  @media (width <= 834px){

    .slideshow_main .office_hours{
      display: none;
    }

  }


/*====================↑スライドショー====================*/







/*====================↓スライドショーキーフレーム====================*/


  /*--------
    画像が3枚
    --------*/

  /*
  @keyframes slideshow_main_img1 {
    0%   { opacity: 1; }
    24%  { opacity: 1; }
    35%  { opacity: 0; }
    91%  { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes slideshow_main_img2 {
    0%   { opacity: 0; }
    24%  { opacity: 0; }
    35%  { opacity: 1; }
    58%  { opacity: 1; }
    69%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes slideshow_main_img3 {
    0%   { opacity: 0; }
    58%  { opacity: 0; }
    69%  { opacity: 1; }
    91%  { opacity: 1; }
    100% { opacity: 0; }
  }
  */


  /*--------
    画像が4枚
    --------*/

  @keyframes slideshow_main_img1 {
    0%   { opacity: 1; }
    15%  { opacity: 1; }
    25%  { opacity: 0; }
    90%  { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes slideshow_main_img2 {
    0%   { opacity: 0; }
    15%  { opacity: 0; }
    25%  { opacity: 1; }
    40%  { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes slideshow_main_img3 {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    50%  { opacity: 1; }
    65%  { opacity: 1; }
    75%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes slideshow_main_img4 {
    0%   { opacity: 0; }
    65%  { opacity: 0; }
    75%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
  }


/*====================↑スライドショーキーフレーム====================*/