@media screen and (min-width:769px) and ( max-width:1037px) {
    
    .hw .list .container a:not(:nth-of-type(3n+1)){
        margin-left: 0;
    }
    
    .hw .list .container a:not(:nth-of-type(odd)){
        margin-left: 80px;
    }
}

@media (max-width: 768px) {    
    
    /* index */
    
    h2.page_title{
        flex-wrap: wrap;
    }
    
    h2 .main_title p{
        font-size: 34px;
    }
    
    h2 .main_title span{
        font-size: 20px;
    }
    
    h2.page_title .icon-bracket{
        font-size: 39px;
        padding: 5px 12px;
    }
    
    h2 .sub_title{
        font-size: 14px;
    }
    
    h2.page_title .sub_title span{
        font-size: 18px;
    }
    
    .main_text .hukidashi{
        padding: 40px;
    }
    
    .main_text .deco{
        margin-left: -40px;
        width: 200px;
    }
    
    .main_text a.form{
        right:-3%;
    }
    
    .index_message h3{
        font-size: 12px;
    }
    
    .index_message img:nth-child(2){
		margin-top: 30px;
    }
    
    .index_message .container:first-of-type{
        margin-bottom: 20px;
    }
    
    .index_message .container:last-of-type{
        background-size: 100%;
        background-color:rgba(255,255,255,0.5);
        background-blend-mode:lighten;
        align-items: center;
    }
    
    .index_message h4{
        font-size: 14px;
        padding-top: 50px;
        text-align: left;
        width: 70%;
    }
    
    .index_message h4 + p{
        width: 70%;
        font-weight: 500;
    }

	/* .index .point .container{
        padding: 70px 0;
    } */
    
    .index .point .container{
        flex-direction: column;
    }
    
    .index .point_box:nth-of-type(odd){
        padding-right: 0;
    }
    
    .index .point_box:nth-of-type(n+3){
        padding-top: 0;
    }
    
    .index .point_box{
		width: 100%;
		margin: 30px auto 0 auto;
	}

	.index .point_box > div > img{
		width: auto;
		height: 65px;
	}

	.index .point_box .point02-1{
		display: none;
	}

	.index .point_box .point02-1m,
	.index .point_box .point02-2m{
		display: block;
		margin-top: 20px;
		width: 100%;
	}

	.index .point_box .point02-1m{
		margin-top: 45px;
	}

	.index .point_box .point02-2m{
		margin-top: 25px;
	}

	.index .point_box .point04-1 img{
		width: 90%;
		height: auto;
	}

	.index .point_box .point05-1 {
		margin-top: 30px;
		margin-bottom: 20px;
		width: 100%;
		height: auto;
	}
	
	.index .point_box .point05-2 {
		width: 100%;
		height: auto;
	}

	.index .point_box .comparison{
		padding: 25px;
	}

	.index .point_box .comparison2{
		margin-top: 30px;
		padding: 25px;
	}
	
	.index .point_box .comparison h3{
		font-size: 20px;
	}

	.index .point_box .comparison h4{
		font-size: 16px;
	}

	.index .point_box .comparison p{
		font-size: 12px;
	}

	.index .point_box:not(:first-child){
        padding-top: 40px;
    }
    
    .index .point h3{
        font-size: 14px;
    }
    
    .index .point .number{
        font-size: 10px;
        line-height: 1em;
    }
    
    .index .point .number span{
        font-size: 14px;
        width: 18px;
        padding: 0px 6px 2px 6px;
    }
    
    .index .point .icon-bracket{
        font-size: 30px;
    }
    
    .index .point_box > p{
        padding-top: 10px;
    }
    
    .index .form .container{
        padding-bottom: 40px;
    }

	.index .free .container{
		width: 100%;
		margin: 0 25px;
		box-sizing: border-box;
	}

	.index .free .main_place_box2 h4 > div{
		font-size: 15px;
		line-height: 27px;
	}

	.index .free .main_place_box2 h4 .free_color{
		font-size: 15px;
		line-height: 27px;
	}

	.index .free .main_place_box2 h4:before{
		height: 80px;
		transform: rotate(-20deg);
	}
	
	.index .free .main_place_box2 h4:after{
		height: 80px;
		transform: rotate(20deg);
	}

	.index .free .inq.flex {
		display: block;
	}

	.index .free .inq.flex a:first-child{
		display: block;
	}

	.index .free .inq_text{
		text-align: center;
	}

	.index .free .inq_text.flex{
		display: block;
	}

	.index .free .inq_text div:first-child{
		margin: 0 auto;
	}

	.index .free .inq_text_border{
		border-bottom: none;
	}

	.index .free .inq_text_border .inq_text_border_cm1{
		display: inline-block;
		border-bottom: 4px dotted #208DFF;
		font-size: 14px;
	}

	.index .form h4,
    .index .form h4 a{
        font-size: 16px;
    }
    
    .index .form h4 > span{
        padding: 0 20px;
    }
    
    .index .information .container{
        width: 100%;
        padding: 0 5%;
    }
    
    .index .information a{
        width: calc(50% - 5px);
        height: auto;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 16px;
    }
    
    .index .information a:not(:first-of-type){
        margin-left: 0;
    }
    
    .index .information a:not(:last-of-type){
        margin-bottom: 10px;
    }
    
    .index .information a:nth-of-type(odd){
        margin-right: 10px;
    }
    
    .index .information a:hover{
    transform: rotate(1deg);
    }
    
    .index .information .number{
        font-size: 20px;
    }
    
    .index .information h6{
        font-size: 14px;
    }
    
    
    /* beginner */
    
    .beginner h3.page_title div{
        font-size: 18px;
    }
    
    .beginner h3.page_title .icon-bracket:before{
        font-size: 40px;
    }
    
    .program .post{
        padding: 10px 0;
    }
    
    .program .step p{
        font-size: 10px;
    }
    
    .program .step > span{
        font-size: 20px;
        padding-left: 10px;
    }
    
    .program .list{
        padding-right: 30px;
    }
    
    .program h6{
        font-size: 12px;
        line-height: 1.5em;
    }
    
    .program .list h6 span{
        font-size: 10px;
        display: block;
        padding-left: 0;
    }
    
    .program .text .flex{
        flex-direction: column;
    }
    
    .program .text .img{
        padding-right: 0;
        width: 100%;
        padding-bottom: 20px;
    }
    
    .program .text .img + div{
        width: 100%;
    }
    
    .document .container{
        border-radius: 0;
    }
    
    .document a:first-of-type{
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .document h3 + div{
        flex-direction: column;
    }
    
    
    /* price */
    
    .price h3 + p {
        padding-top: 20px;
    }
    
    .price .caption h4{
        font-size: 15px;
    }
    
    .price .caption .hukidashi{
        font-size: 12px;
        padding: 30px;
        margin: 20px 0;
    }
    
    .price .caption p{
        font-size: 14px;
    }
    
    .price_box{
        padding: 20px;
    }
    
    .price_box h4{
        flex-wrap: wrap;
        padding: 0 10px 10px 10px;
    }
    
    .price_box h4 p{
        font-size: 14px;
    }
    
    .price_box h4 .icon-bracket{
        font-size: 16px;
    }
    
    .price_box h4 .icon-flag,
    .price_box h4 span.sub{
        font-size: 12px;
    }
    
    .price_box h5{
        font-size: 15px;
        padding: 20px 0;
    }
    
    .price_box .hukidashi {
        padding: 6px 14px;
        font-size: 12px;
        color: #fff;
    }
    
    .price_box .hukidashi i {
        font-size: 13px;
    }
    
    .price_box .value_sub {
        font-size: 12px;
        padding-top: 10px;
    }
    
    .price_box .value {
        font-size: 24px;
        letter-spacing: 0.03em;
    }
    
    .price_box .value span {
        font-size: 14px;
    }
    
    .price_box h5 + div div{
        width: 100%;
    }
    
    .price_box h5 + div div:first-of-type{
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .price_20 > .flex{
        flex-direction: column;
        align-items: center;
    }
    
    .price_box .price_20 .flex .flex:first-of-type{
        margin-right: 0;
    }
    
    
    /* happywedding */
    
    .hw h3 + p{
        padding-top: 20px;
    }
    
    .hw .contents .container{
        flex-wrap: wrap;
    }
    
    .hw .ph{
        width: 100%;
    }
    
    .hw .img_circle img{
        width: 250px;
        height: 250px;
    }
    
    .hw .sex{
        padding-bottom: 30px;
    }
    
    .hw .contents .text{
        width: 100%;
        margin-left: 0;
    }
    
    .hw .contents .title{
        padding: 20px 30px;
        margin-top: 40px;
    }
    
    .hw .contents .title p.title1{
        font-size: 14px;
    }
    
    .hw .contents .title p.title2{
        font-size: 20px;
    }
    
    .hw .contents .title p.title3{
        font-size: 14px;
    }
    
    .hw .comment p{
        font-size: 13px;
    }

    .hw .list .container a:not(:nth-last-of-type(-n+3)){
        margin-bottom: 0;
    }
    
    .hw .list .container a:not(:nth-of-type(3n+1)){
        margin-left: 0;
    }
    
    .hw .list .container a:not(:nth-of-type(odd)){
        margin-left: 0;
    }
    
    .hw .list .container a:not(:last-of-type){
        margin-bottom: 30px;
    }
    
    .hw .hukidashi{
        font-size: 16px;
        padding: 5px 30px 10px 30px;
    }
    
    
    /* list */
    
    .list_panel{
        width: 100%;
        padding: 20px;
        border-radius: 10px;
    }
    
    .list h3 + p {
        padding-top: 20px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.05em;
    }
    
    .list_panel:not(:nth-of-type(3n)){
        margin-right: 0;
    }
    
    .list_panel:nth-of-type(n+4){
        margin-top: 0;
    }
    
    .list_panel:not(:last-of-type){
        margin-bottom: 10px;
    }
    
    .list_panel div{
        height: 52px;
        align-items: center;
    }
    
    .list_panel h5{
        font-size: 13px;
        text-align: left;
        padding-top: 20px;
    }
    
    .list_panel .sex{
        font-size: 12px;
        width: 40px;
    }
    
    .list_panel .fa-user{
        font-size: 30px;
    }
    
    
    /* request */
    
    .request dd{
        flex-wrap: wrap;
        padding: 0 0 15px 0;
    }
    
    .request dt{
        padding: 15px 0 5px 0;
    }
    
    .request .birth{
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .birth input:first-of-type{
        margin-left: 0;
    }
    
    .birth input,
    .birth input + span,
    .birth .select + span{
        margin-bottom: 10px;
    }
    
    .request .working > span,
    .request .sex > span{
        flex-wrap: wrap;
        width: 100%;
        padding-right: 0;
    }
    
    .request .time > span,
    .request .time .wave{
        margin-bottom: 10px;
    }
    
    .request dd p.blue,
    .request .etc input,
    .request span .etc,
    .request input.width200{
        width: 100%;
    }
    
    .request .checkbox .nowrap:last-of-type .etc,
    .request .radio-fontas + .etc{
        display: flex;
        align-items: center;
    }
    
    .request .sex > label:last-of-type{
        padding-right: 0;
    }

	.request .ordertime > span:first-child{
		width: 100%;
	}
    
    .request .link_send {
        font-size: 12px;
        padding: 8px 30px;
    }
    
    
    /* terms */
    
    .conditions .male,
    .conditions .female{
        width: 100%;
    }
    
    .conditions .male{
        border-right: 0;
        padding-right: 0;
    }
    
    .conditions .female {
        padding-left: 0;
        padding-top: 20px;
    }
    
    .conditions .container{
        flex-wrap: wrap;
    }
    
    .conditions h5 span{
        font-size: 14px;
        white-space: nowrap;
    }
    
    .conditions h5 span i{
        font-size: 14px;
    }
    
    .kiyaku h5{
        font-size: 12px;
        padding-top: 15px;
        margin-bottom: 20px;
    }
    
    .conditions .female h5{
        margin-top: 20px;
    }
    
    
    /* footer */
    
    footer{
        background: #333;
    }
}