@media only screen and (max-width: 767px) {
  body {
    min-width: 100%;
    max-width: 750px;
    font-size: calc(30px + 30 * ((100vw - 750px) / 750));
    background-size: auto;
  }
  .l_wrap {
    width: 100%;
  }
    
  /*----------------------------------------------
  .l_bg
  ---------------------------------------------*/
    .l_bg{
    background:linear-gradient(to bottom,rgba(87, 177, 255, 0.7),rgba(193, 226, 255, 0.7),rgba(193, 226, 255, 0.7)),url("../images/sp_bg.webp") center top / 100% auto repeat-y;
    }
    
  #top .l_bg {
  background:url("../images/top_bg_sp.webp") center top / 100% auto no-repeat;
}

  /*----------------------------------------------
  .l_header_area
  ---------------------------------------------*/
  .l_header_area {
    height: 15vw;
  }
  .l_header::after{
    content: "";
    background:url("../images/logo.png") no-repeat center / contain;
    position: absolute;
    top: calc( 8vw + 30px );
    right: calc( 8vw / 2 );
    width: 10vw;
    height: 10vw;
    }
  /*----------------------------------------------
  .l_container
  ---------------------------------------------*/
  .l_container {
    padding: 0;
  }
  /*----------------------------------------------
  .l_side_contents
  ---------------------------------------------*/
  .l_side_contents > *:not(.drawer-nav) {
    display: none;
  }
    .l_side_contents:after{
        display:none;
    }
  /*----------------------------------------------
  .l_main_contents
  ---------------------------------------------*/
  .l_main_contents {
    width: 100%;
    position: relative;
    float: none;
    padding: 6vw 0 20vw;
  }
.inner .l_main_contents {
    padding-top: 40px;
}
  .l_content {
    margin: 0 2.6vw;
    padding: 8vw 3.6vw 10vw;
    min-height: 65vw;
    font-size: calc(29px + 29 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .l_poster_area
  ---------------------------------------------*/
  .l_poster_area {
    height: auto;
    padding: 57.5% 0;
    background-size: contain;
  }
  .l_poster_theme {
      width:23vw;
      height:auto; 
      top: 15vw;
      right:1vw;
  }
  .l_poster_detail {
    bottom: 1vw;
    width: 80vw;
  }
  .l_poster_date {
    top: 12vw;
    width: 50vw;
      left:20vw;
  }
  /*----------------------------------------------
  .l_header_title
  ---------------------------------------------*/
  .l_header_title {
    max-width: calc(100vw - 8vw - 50px);
  width: 100%;
  height: auto;
    top: 5px;
    left: 10px;
  }
  /*----------------------------------------------
  .l_news_area
  ---------------------------------------------*/
  .l_news_area {
    margin: 0 2.6vw;
    padding: 0;
  }
  .l_news_area dt {
    font-size: unset;
  }
  .l_news_header {
    padding: 2.6vw;
    font-size: calc(38px + 38 * ((100vw - 750px) / 750));
  }
  .l_news_header:before {
    content: "";
    background-size: contain;
    width: 6.35vw;
    height: 6.35vw;
    position: relative;
    top: 0;
    margin-right: 1.25vw;
  }
  .c_news_type01 {
    max-height: 47vw;
    font-size: calc(28px + 28 * ((100vw - 750px) / 750));
  }
  .c_news_type01 dt, .c_news_type01 dd {
    padding: 2.1vw 2.6vw;
  }
  .c_news_type01 dt {
    float: none;
    clear: left;
    padding-bottom: 0px;
  }
  .c_news_type01 dd:not(:last-of-type) {
    word-wrap: break-word;
    padding-top: 0px;
    border-bottom: 1px dashed #aaa;
  }
  .c_news_type01 dd:not(:first-of-type) {
    border-top: unset;
  }
  /*----------------------------------------------
  .l_contact_area
  ---------------------------------------------*/
  .l_contact_area {
    padding: 5vw 2.6vw;
  }
  .l_footer_area .l_contact_area {
    padding: 0vw 2.6vw;
  }
  .l_contact_area .c_contact_header {
    font-size: unset;
  }
  .l_contact_area .c_contact_header, .l_contact_area .c_contact_details {
    padding: 1vw 1.6vw;
  }
  .l_contact_area .c_contact_type02:first-child {
    padding-left: 0;
  }
  .l_contact_area .l_double {
    display: flex;
    flex-direction: column;
  }
  .c_contact_type02 .c_contact_header {
    font-size: calc(30px + 30 * ((100vw - 750px) / 750));
    font-weight: bold;
  }
  .c_contact_type02 .c_contact_details {
    line-height: 1.5;
    font-size: calc(27px + 27 * ((100vw - 750px) / 750));
  }
  .c_contact_type03 {
    padding: 0;
    position: relative;
  }
  .c_contact_type03:first-child:after {
    content: none;
  }
  .c_contact_type04 .c_contact_header {
    display: block;
  }
  .l_contact_area .c_contact_footer .c_contact_header, .l_contact_area .c_contact_footer .c_contact_details {
    padding: 0;
  }
  .c_contact_footer .c_contact_header {
    margin-bottom: 5px;
    font-size: calc(30px + 30 * ((100vw - 750px) / 750));
  }
  .c_contact_footer .c_contact_details {
    font-size: calc(27px + 27 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .l_double
  ---------------------------------------------*/
  .l_double {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .l_double > * {
    width: 100% !important;
  }
  .l_double > *:first-child {
    padding-left: 0;
    margin-bottom: 3.5vw;
  }
  #sample .l_double02 {
    display: unset;
  }
  #sample .l_double02 > * {
    width: 100% !important;
  }
  #sample .l_double02 > * {
    margin-bottom: 3.97vw;
  }
  #sample section:nth-of-type(4) .l_double {
    display: block !important;
  }
  #sample section:nth-of-type(4) .l_double > div {
    width: 49% !important;
    display: inline-block !important;
  }
  /*----------------------------------------------
    .l_double_table
  ---------------------------------------------*/
  .l_double_table .c_table_type01 th {
    width: auto;
  }
  .l_double_table .c_table_type01:first-child th, .l_double_table .c_table_type01:first-child td {
    border-right: none;
  }
  /*----------------------------------------------
  .l_copyright
  ---------------------------------------------*/
  .l_copyright {
    font-size: calc(24px + 24 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .l_pagetop
  ---------------------------------------------*/
 
  .l_pagetop {
    position: fixed;
    right: 2.6vw;
    z-index: 99;
    bottom: 38vw;
  }
  /*
  .l_pagetop.attached {
    position: absolute;
    bottom: 0;
    right: 2.6vw;
  }
*/
  /*----------------------------------------------
  .c_nav_type01
  ---------------------------------------------*/
  .l_nav_area .inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .c_nav_type01 {
    padding-top: 13vw;
  }
  .c_nav_type01 li a, .c_nav_type01 li span {
    padding: 4.5vw 2.6vw;
    font-size: unset;
  }
  /*----------------------------------------------
  .c_nav_type02
  ---------------------------------------------*/
  .c_nav_type02 {
    padding-top: 13vw;
  }
  /*----------------------------------------------
  .c_nav_type03
  ---------------------------------------------*/
  .c_nav_type03 {
    padding-top: 13vw;
  }
  /*----------------------------------------------
  .c_ttl
  ---------------------------------------------*/
  .c_ttl_type01 {
    font-size: calc(5rem + 50 * ((100vw - 750px) / 750));
    padding: 2vw 2.5vw;
    margin: 0 2.6vw;
  }
.c_ttl_type01 {
  font-size: 2.6rem;
  font-weight: bold;
  background:url("../images/sp_news_bg.png") no-repeat right center / contain, linear-gradient(to right, #FF6A85, #FFA9B8, #FFCFD9, #FFECEF);
  color: #fff;
  text-shadow: 1px 1px 3px #666;
  padding: 15px 20px;
}
  .c_ttl_type02 {
    padding: 1.1vw 2.2vw;
    font-size: calc(4.4rem + 44 * ((100vw - 750px) / 750));
  }
  .c_ttl_type03 {
    font-size: calc(3.8rem + 38 * ((100vw - 750px) / 750));
    padding: 3.5px 1.6vw;
  }
  .c_ttl_type04, .c_ttl_type04_02 {
    font-size: calc(3.4rem + 34 * ((100vw - 750px) / 750));
    padding-bottom: 0;
  }
  .c_ttl_type05 {
    font-size: calc(3.2rem + 32 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .c_btn
  ---------------------------------------------*/
  .c_btn_type01 {
    padding: 6vw;
    width: 100%;
    font-size: calc(30px + 30 * ((100vw - 750px) / 750));
    ;
  }
  .c_btn_type01.is_word::before, .c_btn_type01.is_excel::before, .c_btn_type01.is_ppt::before, .c_btn_type01.is_pdf::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4.3vw;
    height: 5.3vw;
    margin: auto 0;
    vertical-align: middle;
    right: 2vw;
  }
  .c_btn_type01.is_word::before {
    background-size: 100%;
  }
  .c_btn_type01.is_excel::before {
    background-size: 100%;
  }
  .c_btn_type01.is_ppt::before {
    background-size: 100%;
  }
  .c_btn_type01.is_pdf::before {
    background-size: 100%;
  }
  .l_button_double .c_btn_type01:first-of-type {
    margin-bottom: 2.65vh;
  }
  .c_btn_type01.is_w250, .c_btn_type01.is_w320, .c_btn_type01.is_w400 {
    width: 100%;
  }
  /*----------------------------------------------
  .c_list_type01
  ---------------------------------------------*/
  .c_list_type01 li:before {
    position: absolute;
    width: 2.25vw;
    top: 0;
    font-size: calc(2rem + 20 * ((100vw - 750px) / 750));
    text-align: center;
  }
  .c_list_type01.is_triangle li:before, .c_list_type01.is_diamond li:before, .c_list_type01.is_square li:before, .c_list_type01.is_disc li:before, .c_list_type01.is_triangle li:before, .c_list_type01.is_diamond li:before {
    top: 2vw;
  }
  .c_list_type01.is_triangle li, .c_list_type01.is_diamond li, .c_list_type01.is_square li, .c_list_type01.is_disc li, .c_list_type01.is_triangle li, .c_list_type01.is_diamond li {
    padding-left: 2.5vw;
  }
  .c_list_type01.is_decimal li {
    padding-left: 7vw;
  }
  .c_list_type01.is_decimal li:before {
    min-width: 1.5em;
    font-size: calc(29px + 29 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .c_table_type01
  ---------------------------------------------*/
  .c_table_type01 th {
    text-align: left;
  }
  .c_table_type01 th, .c_table_type01 td {
    width: 100%;
    display: block;
  }
  .c_table_type01 th, .c_table_type01 tr:not(:last-of-type) td {
    border-bottom: none;
  }
  .c_table_type01 th.is_w15, .c_table_type01 th.is_w20, .c_table_type01 th.is_w30, .c_table_type01 th.is_w40, .c_table_type01.is_w01, .c_table_type01.is_w02, .c_table_type01.is_w03 {
    width: 100%;
  }
  /*----------------------------------------------
  .c_table_type03
  ---------------------------------------------*/
  .c_table_type03 {
    border-top: none;
  }
  .c_table_type03 th {
    text-align: left;
  }
  .c_table_type03 th, .c_table_type03 td {
    width: 100%;
    display: block;
  }
  .c_table_type03 th, .c_table_type03 tr:not(:last-of-type) td {
    border-bottom: none;
  }
  .c_table_type03 thead {
    display: none;
  }
  .c_table_type03 tbody tr th:first-child:before {
    content: "ヘッダータイトル";
    background: #08B8FF;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin: -14px -14px 14px -14px;
    padding: 14px;
    display: block;
  }
  .c_table_type03 td {
    text-align: left;
  }
  /*ヘッダータイトルを個別でつける場合------------------------------
  
  .c_table_type03 tbody tr:nth-child(1) th:first-child:before {
    content: "ヘッダータイトル1";
  }
  .c_table_type03 tbody tr:nth-child(2) th:first-child:before {
    content: "ヘッダータイトル2";
  }
  .c_table_type03 tbody tr:nth-child(3) th:first-child:before {
    content: "ヘッダータイトル3";
  }
  
  ------------------------------------------------------------*/
  /*----------------------------------------------
  .c_table_type04
  ---------------------------------------------*/
  .c_table_type04 th {
    text-align: left;
  }
  .c_table_type04 th, .c_table_type04 td {
    width: 100%;
    display: block;
  }
  .c_table_type04 th, .c_table_type04 tr:not(:last-of-type) td {
    border-bottom: none;
  }
  .c_table_type04 thead {
    display: none;
  }
  .c_table_type04 tr {
    width: 100%;
  }
  .c_table_type04 td {
    display: block;
    text-align: right;
    width: 100%;
  }
  .c_table_type04 th:first-child {
    background: #08B8FF;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .c_table_type04 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
  /*----------------------------------------------
    .is_scroll
  ---------------------------------------------*/
  .is_scroll {
    width: 100%;
    overflow-x: scroll;
  }
  .is_scroll .c_table_type01 {
    width: 100%;
    min-width: 600px;
    table-layout: fixed;
  }
  .is_scroll .c_table_type01 th, .is_scroll .c_table_type01 td {
    display: table-cell;
    white-space: normal;
  }
  .is_scroll .c_table_type01 th, .is_scroll .c_table_type01 tr:not(:last-of-type) td {
    border-bottom: 1px solid #375E7B;
  }
  .is_scroll .c_table_type01 th.is_w15 {
    width: 30vw !important;
  }
  .is_scroll .c_table_type01 th.is_w20 {
    width: 40vw !important;
  }
  .is_scroll .c_table_type01 th.is_w30 {
    width: 50vw !important;
  }
  .is_scroll .c_table_type01 th.is_w40 {
    width: 60vw !important;
  }
  /*----------------------------------------------
  .c_box_type01
  ---------------------------------------------*/
  .c_box_type01 {
    padding: 2.25vw;
  }
  .c_box_type01_header {
    font-size: calc(2.8rem + 28 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .c_box_type02
  ---------------------------------------------*/
  .c_box_type02 {
    padding: 2.25vw;
  }
  .c_box_type02_header {
    font-size: calc(2.8rem + 28 * ((100vw - 750px) / 750));
  }
  /*----------------------------------------------
  .c_box_type03
  ---------------------------------------------*/
  .c_box_type03 {
    padding: 2.25vw;
  }
  /*----------------------------------------------
  .c_period_box
  ---------------------------------------------*/
  .c_period_box {
    flex-direction: column;
  }
  /*----------------------------------------------
  u_mab
  ---------------------------------------------*/
  .u_mab10, .u_sp_mab10 {
    margin-bottom: 1.32vh;
  }
  .u_mab15, .u_sp_mab15 {
    margin-bottom: 1.98vh;
  }
  .u_mab20, .u_sp_mab20 {
    margin-bottom: 2.65vh;
  }
  .u_mab25, .u_sp_mab25 {
    margin-bottom: 3.31vh;
  }
  .u_mab30, .u_sp_mab30 {
    margin-bottom: 3.97vh;
  }
  .u_mab40, .u_sp_mab40 {
    margin-bottom: 5.30vh;
  }
  .u_mab50, .u_sp_mab50 {
    margin-bottom: 7.95vh;
  }
  .u_sp_mal_auto{
    margin-left:auto;
  }
  /*----------------------------------------------
  u_sp_mar
  ---------------------------------------------*/
  .u_sp_mar0 {
    margin-right: 0;
  }
  /*----------------------------------------------
  miscellaneous
  ---------------------------------------------*/
  .u_pc {
    display: none !important;
  }
  .u_sp {
    display: block !important;
  }
  .u_sp_ALcenter {
    text-align: center !important;
  }
  .u_sp_ALright {
    text-align: right !important;
  }
  .u_sp_ALleft {
    text-align: left !important;
  }
  .u_fs11 {
    font-size: calc(25px + 25 * ((100vw - 750px) / 750));
  }
  .u_fs12 {
    font-size: calc(26px + 26 * ((100vw - 750px) / 750));
  }
  .u_fs13 {
    font-size: calc(27px + 27 * ((100vw - 750px) / 750));
  }
  .u_fs14 {
    font-size: calc(28px + 28 * ((100vw - 750px) / 750));
  }
  .u_fs15 {
    font-size: calc(29px + 29 * ((100vw - 750px) / 750));
  }
  .u_fs16 {
    font-size: calc(30px + 30 * ((100vw - 750px) / 750));
  }
  .u_fs17 {
    font-size: calc(31px + 31 * ((100vw - 750px) / 750));
  }
  .u_fs18 {
    font-size: calc(32px + 32 * ((100vw - 750px) / 750));
  }
  .u_fs19 {
    font-size: calc(33px + 33 * ((100vw - 750px) / 750));
  }
  .u_fs20 {
    font-size: calc(34px + 34 * ((100vw - 750px) / 750));
  }
  .u_fs21 {
    font-size: calc(35px + 35 * ((100vw - 750px) / 750));
  }
  .u_fs22 {
    font-size: calc(36px + 36 * ((100vw - 750px) / 750));
  }
  .u_fs23 {
    font-size: calc(37px + 37 * ((100vw - 750px) / 750));
  }
  .u_fs24 {
    font-size: calc(38px + 38 * ((100vw - 750px) / 750));
  }
  a {
    line-break: anywhere;
  }
  /*----------------------------------------------
  u_flex
  ---------------------------------------------*/
  .u_flex.is_sp_column {
    flex-direction: column;
  }
      .u_flex.is_sp_columnR {
        flex-direction: column-reverse;
    }
}