@charset "UTF-8";

/*-----------------------------------------
 PC表示
-----------------------------------------*/
html[data-browse-mode="P"] .for-sp { display: none;}
	
/* LAYOUT */
#freepage_operation { max-width: 1200px; margin: 0 auto 180px;}
#freepage_operation .freepage_operation__header { text-align: center; font-size: 38px; font-weight: bold;}

/* MENU */
#freepage_operation .freepage_operation__menu { margin-top: 40px;}
#freepage_operation .freepage_operation__menu ul { display: flex; justify-content: space-between;}
#freepage_operation .freepage_operation__menu ul li { width: calc((100% - (30px * 2)) / 3); margin-left: 30px;}
#freepage_operation .freepage_operation__menu ul li:first-child { margin-left: 0;}
#freepage_operation .freepage_operation__menu ul li a { position: relative; width: 100%; height: 65px; border: 1px solid #ADADAD; border-radius: 5px; padding-left: 20px; display: flex; align-items: center;}
#freepage_operation .freepage_operation__menu ul li a > span { display: block;}
#freepage_operation .freepage_operation__menu ul li a .step_txt { color: #CC0000; font-size: 14px; font-weight: bold;}
#freepage_operation .freepage_operation__menu ul li a .step_num { font-size: 20px;}
#freepage_operation .freepage_operation__menu ul li a .step_ttl { margin-left: 20px; font-size: 16px;}
#freepage_operation .freepage_operation__menu ul li a:after { content: ""; width: 8px; height: 8px; border-right: 2px solid #976F11; border-top: 2px solid #976F11; position: absolute; right: 20px; top: calc(50% - 4px); display: block; transform: rotate(135deg);}

/* STEP */
#freepage_operation .freepage_operation__step { margin-top: 80px;}
#freepage_operation .freepage_operation__step h2 { margin: 0; display: flex;}
#freepage_operation .freepage_operation__step h2 > span { display: block;}
#freepage_operation .freepage_operation__step h2 .step_txt { color: #CC0000; font-size: 20px; font-weight: bold;}
#freepage_operation .freepage_operation__step h2 .step_num { font-size: 30px;}
#freepage_operation .freepage_operation__step h2 .step_ttl { margin-left: 30px; font-size: 32px; font-weight: bold; color: #111111;}
#freepage_operation .freepage_operation__step .step_list { margin-top: 65px;}
#freepage_operation .freepage_operation__step .step_list ul { display: flex; flex-wrap: wrap;}
#freepage_operation .freepage_operation__step .step_list ul li { width: calc((100% - 40px) / 2); margin-top: 60px; margin-right: 40px;}
#freepage_operation .freepage_operation__step .step_list ul li:nth-child(2n) { margin-right: 0;}
#freepage_operation .freepage_operation__step .step_list ul li:nth-child(-n + 2) { margin-top: 0;}
#freepage_operation .freepage_operation__step .step_list ul li .step_list_item_ttl { display: flex;}
#freepage_operation .freepage_operation__step .step_list ul li .step_list_item_ttl_num { width: 54px; height: 54px; background-color: #111; color: #fff; font-size: 20px; font-weight: bold; display: flex; justify-content: center; align-items: center;}
#freepage_operation .freepage_operation__step .step_list ul li .step_list_item_ttl_name { flex-grow: 1; height: 54px; margin-left: 16px; border-bottom: 1px solid #CC0000; font-size: 24px; font-weight: bold; display: flex; align-items: center;}
#freepage_operation .freepage_operation__step .step_list ul li .step_list_item_txt { margin-top: 30px; font-size: 16px;}
#freepage_operation .freepage_operation__step .step_list ul li .step_list_item_img { margin-top: 40px;}

/*-----------------------------------------
 SP表示
-----------------------------------------*/
html[data-browse-mode="S"] .for-pc { display: none;}

html[data-browse-mode="S"] #freepage_operation { max-width: auto; margin: 0 15px 40px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__header { padding: 0; margin: 30px 0 20px !important; font-size: 28px; font-weight: bold; text-align: center;}

/* MENU */
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul { display: block;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul li { width: 100%; margin: 0 0 10px 0;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul li a { height: 50px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul li a > span { display: flex; align-items: center;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul li a .step_txt { font-size: 12px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul li a .step_num { margin-left: 5px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__menu ul li a .step_ttl { font-size: 14px;}

/* STEP */
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step { margin-top: 60px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step h2 .step_txt { font-size: 16px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step h2 .step_num { font-size: 18px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step h2 .step_ttl { margin-left: 20px; font-size: 20px; font-weight: bold; color: #111111;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list { margin-top: 40px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul { display: block;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul li { width: 100%; margin: 0 0 30px 0;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul li .step_list_item_ttl { display: flex;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul li .step_list_item_ttl_num { width: 30px; height: 30px; font-size: 14px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul li .step_list_item_ttl_name { height: 30px; padding-bottom: 8px; margin-left: 16px; border-bottom: 2px solid #CC0000; font-size: 16px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul li .step_list_item_txt { margin-top: 20px; font-size: 14px;}
html[data-browse-mode="S"] #freepage_operation .freepage_operation__step .step_list ul li .step_list_item_img { margin-top: 20px; text-align: center;}