/*
Theme Name: visitcare
Theme URI: https://app.e-learning.visitcare-plus.co.jp/
Author: visitcare team
Author URI: https://bisicare.com/
Description: visitcare app site
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://bisicare.com/
Text Domain: visitcare app site
Tags: visitcare
*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
/********************** common */
* {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
button {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
	border: none;
}
button:hover {
	opacity:0.7;
}

.sp {
	display: none;
}
@media (max-width: 768px) {
	.sp {
		display: initial !important;
	}
}
/********************** header */
.header-titles-wrapper {
	padding: 20px 0px !important;
}
#site-header .lp-content-area{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#site-header .titlet-area a{
	background: white;
	display: inline-block;
}
#site-header .titlet-area img{
	max-width:140px;
}
.header-titles-wrapper {
	background: #fff !important;
	border-bottom: 1px solid var(--lp-secondary-color);
}
#site-header .lp-content-area {
	align-items: initial !important;
}

.logged-in-area{
    display: flex;
    justify-content: space-between;
    background: #fff;
	color:var(--lp-secondary-color);
    nav.menu_pc{
        height: 100%;
        @media (max-width: 1040px){
            display: none;
        }
        /* 1髫主ｱ､逶ｮ */
        >ul{
			list-style: none;
            height: 100%;
            display: flex;
            >li{
                position: relative;
                height: 100%;
                >a{
                    padding: 0 20px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    color: #000;
                    transition: .3s;
                    &:hover{
                        opacity: .7;
                    }
                }
                &:hover{
                    >ul{
                        display: block;
                    }
                }
                &:nth-last-of-type(1),
                &:nth-last-of-type(2){
                    >ul{
                        left: initial;
                        right: 0;
                        ul{
                            left: initial;
                            right: 100%;
                            padding-right: 2px;
                        }
                    }
                }
                /* 2髫主ｱ､逶ｮ */
                ul{
					box-shadow: 2px 2px 2px -2px var(--lp-secondary-color);
					list-style: none;
                    position: absolute;
                    top:100%;
                    left: 0;
                    z-index: 1000;
                    min-width: 200px;
                    display: none;
                    li{
                        position: relative;
                        a{
                            padding: 10px 20px;
                            display: flex;
                            justify-content: center;
                            color: #000;
                            text-align: center;
                            font-size: 14px;
                            background: #fff;
                            &:hover{
                            	color: rgba(42,167,223,0.5);
                            }
                        }
                        &:hover{
                            ul{
                                display: block;
                            }
                        }
                        /* 3髫主ｱ､逶ｮ */
                        ul{
                            padding-left: 2px;
                            position: absolute;
                            top: 0;
                            left: 100%;
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

body.no_scroll {
	position:fixed;
	width: 100%;
}
nav.menu_sp{
    display: none;
    @media (max-width: 1040px){
        display: initial;
    }
}
nav.menu_sp ul{
    display: none;
}
nav.menu_sp ul.active{
    display: initial;
	background-color: var(--lp-secondary-color);;
}
.header-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hamburger{
  width: 40px;
  height: 25px;
  position: relative;
	top: 6px;
	right: 50px;
}
.hamburger span{
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--lp-secondary-color);
}
.hamburger span:first-of-type{
  top: 0;
}
.hamburger span:nth-of-type(2){
  top: 50%;
}
.hamburger span:last-of-type{
  top: 100%;
}
.menu_sp ul{
  position: fixed;
  top: 65px;
  width: 100%;
  left: 0;
	z-index: 99999;
}
.menu_sp li{
  color: #fff;
  line-height: 400%;
  text-align: center;
}
.menu_sp li a{
  color: #fff;
}
.hamburger.active span:first-of-type{/* ハンバーガーメニューの1番目の線 */
  top: 50%;
  transform: rotate(45deg);
}
.hamburger.active span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
  opacity: 0;/* 透明にする */
}
.hamburger.active span:last-of-type{/* ハンバーガーメニューの3番目の線 */
  top: 50%;
  transform: rotate(-45deg);
}
.slide-menu.active{
  transform: translateX(0); 
}
.staging_announce {
	position:fixed;
	top:0;
	left:calc(50% - 50px);
	background-color: #f00;
	text-align:center;
	opacity:0.8;
	z-index: 9999999999999999999999;
}
.staging_announce p{
	color:#fff;
	font-size:12px;
	padding:2px 20px;
	text-align:center;
}

@media (max-width: 520px) {
	.dashboard-statistic__row {
		padding: 0 !important;
	}
}

/********************** footer */
#site-footer {
	min-height: 80px;
	background-color: #f1f2f8;
	padding: 20px 0;
	text-align: center;
}
#popup-footer {
	display:none;
}
.footer_link {
	display: flex;
	justify-content: flex-start;
}
.footer_link a{
	font-size: 13px;
	margin:0 20px;
}
p.footer-copyright {
	text-align:right;
	font-size: 15px;
}
@media (max-width: 520px) {
	#site-footer {
		padding: 20px 0 0;
	}
	.footer_link {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer_link a{
		margin:0;
	}
	p.footer-copyright {
		margin-top:20px;
	}
}

/********************** login */
.pn-wrapper {
	padding: 16px !important;
}
.pn-wrapper span.pn-msg {
	display: block;
}
.pn-wrapper span.pn-btns {
	display: block;
	text-align: center;
}

/********************** profile */
.lp-user-profile #profile-sidebar {
	float: initial !important;
	width: initial !important;
	display: none !important;
}
.lp-user-profile .lp-profile-content {
	float: initial !important;
	width: initial !important;
}

.header-titles-wrapper {
	color: #fff;
	background: var(--lp-secondary-color);
	height:80px;
	text-wrap: nowrap;
	padding: 10px 0px;
}
.logged-in-area {
	text-align: right;
}
.wrapper-profile-header.wrap-fullwidth{
	display:none;
}
#site-content a {
	color: var(--lp-secondary-color);
}
.learn-press-profile-course__progress .lp_profile_course_progress__item td {
	color: #666;
	font-weight: 600;
	font-size: 1em !important;
}
tbody tr.lp_profile_course_progress__item {
	height: 80px;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}
#profile-nav li.quizzes {
	display:none;
}
#profile-nav li.orders {
	display:none;
}
#profile-content-settings .form-field__profile-social{
	display:none;
}
#profile-content-settings .form-field__bio{
	display:none;
}
.lp-user-profile #profile-content-settings .learn-press-tabs__nav .learn-press-tabs__tab {
	width: 50% !important;
}

.form-field.form-field__797785.form-field__clear {
	display:none;
}

.change-password.active {
	background-color:#fff !important;
}
.change-password.active::before {
	background: var(--lp-primary-color) !important;
}
.course-curriculum .course-item.course-item-lp_quiz .section-item-link::before {
	display: none;
}
.lp-archive-courses .lp-entry-content .entry-content-left {
	padding-top: 0 !important;
}
.lp-user-profile .lp-profile-content {
	padding-top: 0 !important;
}
#profile-content-courses h3 {
	margin-top: 30px;
}
.learn-press-profile-course__progress.manager .lp_profile_course_progress__item th {
	width: initial !important;
}
.learn-press-profile-course__progress.manager .lp_profile_course_progress__item td:nth-child(2) {
	width: 10% !important;
}
.learn-press-profile-course__progress.manager .lp_profile_course_progress__item td:nth-child(3) {
	width: 10% !important;
}
.learn-press-profile-course__progress.manager .lp_profile_course_progress__item td:nth-child(4) {
	width: 10% !important;
}
.learn-press-profile-course__progress.manager .lp_profile_course_progress__item td:nth-child(5) {
	width: 10% !important;
}
.learn-press-profile-course__progress.manager .lp_profile_course_progress__item td:nth-child(6) {
	width: 10% !important;
}
.lp_profile_course_progress th {
	width: 15% !important;
}
.lp_profile_course_progress th:nth-child(1) {
	width: 40% !important;
}
.lp_profile_course_progress td {
	width: 15% !important;
}
.lp_profile_course_progress td:nth-child(1) {
	width: 40% !important;
}
.lp_profile_course_progress td:nth-child(5) {
	color:#dedede;
}
.learn-press-profile-course__tab.seminar {
	margin-top: 60px;
}
.admin_button {
	margin-bottom: 10px;
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}
.admin_button button{
	padding:10px 30px;
	margin:0;
}
.manager {
        .houtei_modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            animation: fadeIn 0.3s ease-out;
        }

        .houtei_modal-overlay.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .houtei_modal {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow: hidden;
            animation: slideIn 0.3s ease-out;
        }

        .houtei_modal-header {
            background-color: #007cba;
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .houtei_modal-header p {
            font-size: 18px;
            font-weight: 600;
        }

        .houtei_close-button {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		color: white;
		font-size: 24px;
		cursor: pointer;
		line-height: 1;
		margin: 0;
		padding: 0;
        }

        .houtei_close-button:hover {
            opacity: 0.7;
        }

        .houtei_modal-content {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }

        .form-group select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .form-group select:focus {
            outline: none;
            border-color: #007cba;
        }

        .description {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 20px 0;
            text-align: left;
        }

        .description p {
            color: #555;
            line-height: 1.6;
            font-size: 14px;
        }

        .houtei_modal-footer {
            background-color: #f8f9fa;
            padding: 20px 30px;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            border-top: 1px solid #e9ecef;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 80px;
        }

        .btn-primary {
            background-color: #007cba;
            color: white;
        }

        .btn-primary:hover {
            background-color: #005a87;
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #545b62;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-50px);
            }
        }

        .houtei_modal.closing {
            animation: slideOut 0.3s ease-out forwards;
        }

        .save-success {
            color: #155724;
            font-weight:bold;
            text-align: center;
            font-size: 16px;
        }

        @media (max-width: 600px) {
            .houtei_modal {
                width: 95%;
                margin: 20px;
            }

            .houtei_modal-content {
                padding: 20px;
            }

            .houtei_modal-footer {
                padding: 15px 20px;
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }
        }
}


#member_status {
	text-align:right;
	margin-top: -32px;
}
#profile-content-my-courses .last_play_button {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 30px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease-out;
}

#profile-content-my-courses .last_play_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

#profile-content-my-courses .last_play_button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 0px rgba(255, 107, 53, 0.2);
    background: linear-gradient(45deg, #ff7a47, #fa9d2a);
}

#profile-content-my-courses .last_play_button:hover::before {
    left: 100%;
}

#profile-content-my-courses .last_play_button:active {
    transform: translateY(-1px);
}
#profile-content-my-courses .last_movie_play_button_area {
	margin: 20px 0 -30px;
	text-align:center;
}

.learn-press-message.success.lp-content-area {
	display: none;
}

@media (max-width: 990px) {
	.lp-user-profile #profile-nav {
		overflow-x: initial !important;
	}
}
@media (max-width: 768px) {
	.learn-press-profile-course__progress .lp_profile_course_progress__header th {
		-ms-writing-mode: tb-rl;
		writing-mode: horizontal-tb !important;
		text-orientation: upright;
	}
}

/********************** courses */
.lp-course-buttons {
	position: fixed;
	top: 50%;
	left: calc(50% - 150px);
	width: 300px;
	z-index: 111111111111111111111111111111111111111111111111111111;
	background-color: #fff;
	padding: 50px;
	opacity: 1;
}
body.learnpress-page:has(.enroll-course){
	background-color: rgba(0, 0, 0, .2);
}
.lp-course-buttons:has(.continue-course.form-button.lp-form){
	display:none;
}
.course-price {
	display:none;
}
ul.learn-press-breadcrumb {
	display:none;
}
.course-meta.course-meta-primary{
	display:none;
}
.course-meta.course-meta-secondary {
	display: none;
}
.lp-archive-courses .course-summary-sidebar {
	margin-top: -170px !important;
}
li.course-nav.course-nav-tab-instructor {
	display: none;
}
.lp-archive-courses thead th, .lp-archive-courses tr th {
	padding: 9px 9px !important;
}
.lp-material-skeleton .course-material-table th {
	text-wrap: nowrap;
}
.backbutton {
	margin-top:40px;
}
.course-curriculum .section-content .course-item-meta .course-item-status {
	color: #e0e0e0 !important;
}
.course-curriculum .course-item.has-status.status-completed .course-item-status::before, .course-curriculum .course-item.has-status.status-evaluated .course-item-status::before {
	font-weight: bold;
}
#popup-sidebar .course-curriculum {
	top: 0 !important;
}
i.lp-icon-file-download.btn-download-material {
	font-size: 30px;
}
.content-item-wrap .course-item-title {
	font-size:calc(var(--lp-font-size-base,1em) * 2) !important;
}
li.result-statistic-field.result-questions-minus {
	display:none !important;
}
.quiz-status{
	display:none !important;
}
#learn-press-quiz-app{
	margin-top:40px;
}
#lp-modal-window #lp-modal-buttons {
	flex-direction: row !important;
}
.learnpress-page .lp-button, .learnpress-page #lp-button {
	display: inline-block;
	margin-right: 20px;
}
.lp-modal-dialog .lp-modal-content {
	min-width: 300px;
}

#learn-press-quiz-app {
	display:none;
}
div.quiz-content p{
	margin-top:20px;
}
img.movie_icon {
	width: 1.3em;
	filter: invert(82%) sepia(15%) saturate(6513%) hue-rotate(352deg) brightness(99%) contrast(104%);
}
#video_speed {
	background-color:#222;
	padding:0 10px;
	text-align: center;
}
#video_speed a {
	width: 30px;
	display: inline-block;
	text-align: center;
	color:#fff;
	font-size: 11px;
	vertical-align: middle;
}
#video_speed a:hover {
	opacity: 0.7;
	cursor:pointer;
}
img.video_button{
	width: 1.5em;
	filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(183deg) brightness(99%) contrast(98%);
}
.content-item-wrap{
	 padding-bottom: 0 !important;
}
button.lp-button.button.button-enroll-course {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 2px;
}
#popup-course {
	position: absolute !important;
	bottom: initial !important;
}
#popup-content {
	margin: 70px 0 0 0 !important;
	padding: 0 0 110px 0 !important;
}
.content-item-wrap .quiz-buttons.align-center .button-left.fixed {
	position: initial !important;
	width: initial !important;
	margin-left: initial !important;
	transform: initial !important;
}
.content-item-wrap .quiz-buttons.align-center {
	display: flex !important;
}
.questions-pagination .page-numbers{
	display: none !important;
}
.questions-pagination button.prev{
	display: flex !important;
	padding: 8px 25px !important;
	width: 100px !important;
	border-radius: 3px !important;
	border-top-right-radius: 3px !important;
	border-bottom-right-radius: 3px !important;
	justify-content: center;
}
.questions-pagination button.next{
	display: flex !important;
	padding: 8px 25px !important;
	width: 100px !important;
	border-radius: 3px !important;
	border-top-left-radius: 3px !important;
	border-bottom-left-radius: 3px !important;
	justify-content: center;
}
.quiz-buttons .button-right {
	margin-left: 20px;
	white-space: nowrap;
}
.content-item-wrap .questions-pagination .nav-links {
	gap: 20px !important;
	margin-top: 0px !important;
}
.quiz-buttons button{
	color:#fff !important;
	background-color: var(--lp-secondary-color) !important;
	border:0 !important;
}
.quiz-attempts {
	display: none !important;
}
.lp-form.form-button.form-button-finish-course {
	display: none !important;
}
.question-explanation-content div {
	white-space: pre-wrap;
}
#popup-content .next_button {
	text-align: center;
}
#popup-content .next_button a{
	border-radius: 2px;
	border: 1px solid var(--lp-secondary-color);
	color: var(--lp-secondary-color);
	padding: 8px 50px;
}
#popup-content .lp-button {
	min-width: 120px;
}

@media (max-width: 768px) {
	.lp-archive-courses .course-summary-sidebar {
		margin-top: 0 !important;
	}
	#sidebar-toggle {
		width: 40px !important;
		min-width: 40px !important;
	}
	.content-item-wrap .course-item-title {
		font-size:calc(var(--lp-font-size-base,1em) * 1.4) !important;
	}
	#lp-modal-window {
		padding: 35px 20px 28px 20px !important;
		min-width: 280px !important;
	}
	#lp-modal-window button{
		min-width: 100px !important;
	}

}

#home_button #modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.6);
}
#home_button .content{
	max-width: 300px;
	background-color:#ffffff;
	width:80%;
	position: absolute;
	top: 35%;
	left: calc(50% - 150px);
	text-align: center;
	border-radius:20px;
	padding-bottom: 20px;
}
#home_button .content p, .content a{
	font-size: 14px;
	padding: 0 20px;
}
#home_button .content img {
	border-radius: 20px 20px 0 0;
	width: calc(100% + 2px);
	position: relative;
	top: -1px;
	left: -1px;
}
#home_button {
	text-align: left;
}
#home_button a#bt {
	display: inline-flex;
	background-color: var(--lp-secondary-color);
	color: #ffffff;
	padding: 5px 15px;
	font-size: 14px;
}
#home_button a#bt img {
	width:22px;
	margin-right: 5px;
}
#home_button p {
	display:none;
}
#home_button p img{
	display:inline;
	width:18px;
	height:18px;
	vertical-align: top;
	margin:0 3px;
}
@media (display-mode: standalone){
	#home_button {
		display:none;
	}
}
@media (max-width: 768px) {
	#home_button {
		text-align: left;
		margin: -27px 0 40px;
	}
}

#houtei_message {
	#houtei_modal {
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.6);
	}
	#houtei_modal .content{
		max-width: 400px;
		background-color:#ffffff;
		width:80%;
		position: absolute;
		top: 35%;
		left: calc(50% - 200px);
		text-align: center;
		padding: 20px;
	}
	#houtei_modal .content p, .content a{
		font-size: 16px;
		padding: 0;
		letter-spacing:-1px;
	}
	#houtei_modal .buttons {
		display: inline-flex;
		gap:10px;
	}
	#houtei_modal .buttons .link{
		border-radius:5px;
		background-color: var(--lp-secondary-color);
		color: #ffffff;
		padding: 5px 15px;
		font-size: 16px;
	}
	#houtei_modal .message {
		margin-bottom:10px;
	}
	#houtei_modal h3 {
		margin-bottom:10px;
	}
	#houtei_modal .buttons #houtei_modal_close{
		border-radius:5px;
		background-color: var(--lp-secondary-color);
		color: #ffffff;
		padding: 5px 15px;
		font-size: 16px;
	}
	@media (max-width: 768px) {
		#houtei_modal .content{
			background-color:#ffffff;
			width:100%;
			position: absolute;
			top: 35%;
			text-align: center;
			padding: 20px;
		}
	}
}

/********************** contact */
.wpcf7-form p{
	margin-top:20px;
}
.wpcf7-form-control-wrap input {
	padding:6px;
	border-radius: 3px;
	border:1px solid #000;
}
.wpcf7-form-control-wrap textarea {
	width:70%;
	padding:6px;
	border-radius: 3px;
	border:1px solid #000;
}
input.wpcf7-submit {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
	border: none;
}
input.wpcf7-submit:hover {
	opacity:0.7;
}

@media (max-width: 768px) {
	.wpcf7-form-control-wrap textarea {
		width:100%;
	}
}

/********************** message */
div.message {
	border: 1px solid var(--lp-secondary-color);
	margin: 20px;
	padding: 20px;
	border-radius: 5px;
}
span.post_date{
	margin-right:20px;
}
p.post_content{
	display:none;
}
span.already {
	color: #fff;
	background-color: #f00;
	padding: 2px 6px;
	vertical-align: middle;
	font-size: 13px;
	margin-right: 4px;
}
span.message_diff_count {
	color: #fff;
	background-color: #f00;
	border-radius: 50%;
	font-size: 8px;
	padding: 4px 8px;
	font-weight: bold;
	margin-left: 3px;
	vertical-align: middle;
}
@media (max-width: 768px) {
	div.message {
		margin: 10px;
		padding: 10px;
	}
}

/********************** banner */

.banner .box {
	margin: 80px 0;
	display: flex;
	justify-content: space-around;
}
.banner .item {
	max-width: 240px;
}
.banner .item img{
	width: 100%;
	height: auto;
}
@media screen and (min-width: 1001px){
	.banner .item:nth-child(4n+1) {
		margin-left: 0;
	}
}
@media screen and (min-width: 751px){
	.banner .item:nth-child(3n+1) {
		margin-left: 0;
	}
}
@media screen and (max-width: 750px){
	.banner {
		margin-top: 60px;
	}
	.banner .box {
		margin: 0;
		flex-direction: column;
		align-items: center;
	}
	.banner .item {
		margin-bottom: 10px;
		width:100%;
		max-width: initial;
	}
}


/*********************** モーダル３回視聴 */
        /* モーダル関連 */
        .modal-3times-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal-3times-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-3times {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            max-width: 28rem;
            width: 100%;
            margin: 0 1rem;
            position: relative;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal-3times-overlay.active .modal-3times {
            transform: scale(1);
        }

        .modal-3times-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(to right, #60a5fa, #a855f7, #ec4899);
        }

        .modal-3times-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            font-size: 1.5rem;
            z-index: 10;
            transition: color 0.2s;
			padding: 0;
        }

        .modal-3times-close-btn:hover {
            color: #4b5563;
        }

        .modal-3times-content {
            padding: 2rem;
            text-align: center;
        }

        .modal-3times-icon-container {
            margin-bottom: 1.5rem;
        }

        .modal-3times-icon {
            width: 5rem;
            height: 5rem;
            margin: 0 auto;
            background: linear-gradient(135deg, #fb923c, #ef4444);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
        }

        .modal-3times-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 1rem;
        }

        .modal-3times-description {
            color: #4b5563;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .modal-3times-button-container {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .modal-3times-primary-btn {
            width: 100%;
            background: linear-gradient(to right, #2563eb, #7c3aed);
            color: white;
            font-weight: 600;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 0.75rem;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .modal-3times-primary-btn:hover {
            background: linear-gradient(to right, #1d4ed8, #6d28d9);
            transform: translateY(-2px);
            box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2);
        }

        .modal-3times-secondary-btn {
            width: 100%;
            background: #e3e4e6;
            color: #1f2937;
            font-weight: 500;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 0.75rem;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.2s;
        }

        .modal-3times-secondary-btn:hover {
            background: #e5e7eb;
        }

        .hidden {
            display: none;
        }

        /* アイコン用のSVG */
        .modal-3times-icon svg {
            width: 2rem;
            height: 2rem;
            fill: currentColor;
        }

        /* レスポンシブ対応 */
        @media (max-width: 640px) {
            .modal-3times {
                margin: 0 0.5rem;
            }
            
            .modal-3times-content {
                padding: 1.5rem;
            }
            
            .modal-3times-title {
                font-size: 1.25rem;
            }
        }